VIBE CODING FULL COURSE: Gemini 3.1 + Antigravity (6 Hrs)

Hey, welcome to the definitive course on vibe coding for beginners. I use anti-gravity, Gemini 3.1 Pro, and Claude Code in my life every day to manage a business that does over $4 million a year in profit. I also teach around 2,000 people how to use technologies just like this to improve their lives, both personal and business. So, the way this course is going to work is it'll start by

teaching you guys how to set up anti-gravity, Gemini, and then Claude Code in a simple development environment. And then we're going to jump right into the building. And we'll start with

development environment. And then we're going to jump right into the building. And we'll start with simple portfolio sites before working our way all the way up to full-fledged SAS apps with authentication, databases, and so on and so forth. At every step along the way, I'm going to pause and then show you guys some of the principles behind what I just built. And my recommendation

is if you want to get the most out of this course, you'd actually build alongside me. Okay, so no fluff. Here's what we're going to cover. We'll start with the simple toolkit. So anti-gravity,

fluff. Here's what we're going to cover. We'll start with the simple toolkit. So anti-gravity,

Gemini 3.1 Pro, and Claude Code. I'll give you guys the best development environment available in probably around 15 minutes. Then we'll build your first vibecoded product, which in our case is going to be a personal site designed with anti-gravity and Gemini.

You'll have this live on the internet, including deployment in about 15 minutes. After that,

I'll pause to talk authentication and security cuz I think it's one thing to build simple portfolio sites and stuff, but if you wanted to push that out to a fullyfledged app with authentication, databases, and a back end, a big issue in vibe coding is security, and I want to make sure that we cover at least the 8020 of that. Then we'll build another product, which will be a

client-f facing dashboard with authentication, a database, and a very clean UI. And at that point, since we'll have gotten our hands dirty, we can then cover foundational concepts behind modern software applications, including hosting, databases, the major software design patterns, versioning and GitHub repositories, the major frameworks currently available, then also how to use agents to vibe code all this stuff way faster. I'm then going to give you a design specific deep

dive, which is how to go from a rough idea to a polished professional design and anti-gravity.

Then we'll build our next product, which will be a lead generation SAS app that scrapes, enriches, and then cues up the sending of fully automatic emails. This is an actual system I use production.

After that, we'll do an AI based SAS app that uses AI to generate thumbnails. It's actually

really similar to the system that I used to create the thumbnail for the video you're watching right now. So, pretty meta. Once we're done with that, I'm going to teach you guys some debugging and

now. So, pretty meta. Once we're done with that, I'm going to teach you guys some debugging and iteration techniques. You guys will probably have seen me do a lot of this and hopefully have done

iteration techniques. You guys will probably have seen me do a lot of this and hopefully have done a lot of it yourselves by now. But, I'm going to give you guys a simple framework that you could use to steer back Gemini and then claude code anytime it starts veering outside of your uh recommendations. And then finally, we'll build a content automation SAS app that repurposes a

uh recommendations. And then finally, we'll build a content automation SAS app that repurposes a single piece of content across multiple platforms. That's another system that I actually use. Before

we wrap up, we'll talk about the economics of vibe coding, which is how to price, package, and then sell what you build. And that's important because I find a lot of people watching this are probably going to be doing so not just for their own hobbies, but for financial reasons. We want to make money with the things that we build. Okay, so I care a lot about making money with this stuff.

I want to show you guys how to do that as well. Hopefully that makes sense. Let's not waste any time. Let's strap in and get started. Okay, so how do you actually set up anti-gravity? Just

time. Let's strap in and get started. Okay, so how do you actually set up anti-gravity? Just

head over to anti-gravity.google. They actually have like the Google domain name, which is hilarious. and then just click on this little download button. If you guys are on a Windows,

hilarious. and then just click on this little download button. If you guys are on a Windows, it'll be download for Windows. Since I'm on a Mac OS, this is download for Mac OS. Now, if you guys don't know which one of these to select. It's pretty easy. Most modern computing applications nowadays have the ability to type like about and then you can just go about this Mac,

about this PC or whatever. And then it'll tell you whether or not you are an Apple silicon or Intel silicon for instance with this line right here. If I was on Intel, it would actually say like an Intel M whatever. Because I'm on an Apple silicon, it says Apple M4 Max. And so this is the one that I need to download. If you guys are on Windows, double check to see if it says x64 anywhere.

If you guys are on Linux, you probably know more about computers than I, so I'll stop embarrassing myself. So I'm going to give this button a quick click. That is going to download the anti-gravity

myself. So I'm going to give this button a quick click. That is going to download the anti-gravity installer. On Mac, what ends up happening is we get a little thing in the top right hand corner

installer. On Mac, what ends up happening is we get a little thing in the top right hand corner here, which is anti-gravity. And then all you guys have to do is just drag this anti-gravity app into the applications folder and then let go. I already have anti-gravity installed, so I'm not going to do that part. But that that's the installation. It's about that easy, at least on Mac. On PC,

you're going to have a little screen that pops up. Just click accept a bunch of times until you're done. Okay. After that, what you're going to get is a page that looks something like this. So, I'm

done. Okay. After that, what you're going to get is a page that looks something like this. So, I'm

just going to zoom in to make things a little bit more visible. And hopefully my big head doesn't get in the way. But basically, um the way that anti-gravity works is you have to connect to your Google account in order to get up and running. And once you connect your Google account, you can also use um you know, Gemini as a model. Uh the reason why this isn't popping up on the right

hand side as you see is because we haven't logged in with Google yet. So, what I'm going to do next, I'm going to click this login with Google button. I'm then going to sign in and click sign in. and

then it'll successfully authenticate you and then take you back to the main menu. After that's done, you'll see up at the top we have a bunch more features. In order to open up the AI feature, just click on this one on the right. It's called your agent. There's also a little hotkey, which I use pretty often, which is just um option uh commandB. And by doing this,

I can make this pop out really quickly and easily. Obviously, if you're on Windows, things will be a little bit different, but it's not that bad. Now, you're inside of anti-gravity.

You can actually have a conversation. So, I'm going to say, "Hey, what's up?" I'm going to run through the UX of how to communicate with your agent in a second, but I just wanted to show you guys how easy it is to actually get the AI part up and running. Um, Gemini 3.1 Pro High should be provided to everybody, although with different usage limits depending on whether or not you

upgrade their plans and so on and so forth. And you also have other models too, like 3.1 Pro Low, Gemini 3 Flash, Sonnet 4.6, Opus 4.6, and so on. Okay, cool. So, that's just getting anti-gravity up and running. The next thing I want to do is I actually want to explain the UX. After I explain the UX, I'll also talk about Claude Code, which is the alternative chat window, kind of like this

little agent chat widget, um, except for the Cloud series of models that performs really, really well in specific applications, which we're also going to use in conjunction with Gemini in this course.

So, really, I want you to think about anti-gravity as being divided into three panes. On the leftmost pane, you have basically the explorer. And for the most part, you're only really going to be using the Explorer. You're not really going to use the rest of these things. In the middle, you're actually going to have your file editor. And right now, we don't have any files open,

which is why we just see the anti-gravity logo. And then on the right hand side, you actually have like your agent chat, your ability to, you know, talk to AI. And this is how most like integrated development environments are nowadays. Um, I say most because anti-gravity isn't really technically an IDE. There's like a couple of additional features here, but I don't want to be pedantic.

an IDE. There's like a couple of additional features here, but I don't want to be pedantic.

For all intents and purposes, this is an IDE. And this is how it works. So, in order for us to see the things on the lefth hand side here, this explore, we actually do need to open a folder, which is why it's asking us to do that. So, I'm going to click open folder. And then I just set up this little demo for a video I recorded yesterday called website builder. So, I'm just going to open

that up. Okay. And now hopefully you guys could see the page is transformed in this middle section

that up. Okay. And now hopefully you guys could see the page is transformed in this middle section is our our file explorer. So because I don't really think files are as important these days to explore because AI does most that for you. I usually make the lefth hand side or the right hand side way bigger. A lot of the time I actually just issue this middle pane entirely actually and

then just chat with the agent. But I'll I'll show you guys how that works later. For now let's learn this on the left hand side here. As you see this is just a file explorer like anything else just like a finder on your computer or whatever. You know you have the exact same thing here. So, you

know, in my case, I'm scrolling through my Mac uh files and and folders and stuff like that. Well,

that's basically exactly what anti-gravity does. It just does it for you in a slightly different user experience. And so, folders in this case have this little folder icon, right? Um specific types

user experience. And so, folders in this case have this little folder icon, right? Um specific types of files which have different file endings have other logos and stuff. This is a markdown file, which is why it's an M and then it's a down. Uh this is an HTML file, which is why it looks like that. And, you know, you don't actually need to know a ton of programming in order to get all of

that. And, you know, you don't actually need to know a ton of programming in order to get all of this stuff. To be honest, um I don't have a formal programming degree or anything like that. I still

this stuff. To be honest, um I don't have a formal programming degree or anything like that. I still

understood this stuff just fine after spending a little bit of time inside of this dashboard. So,

just to prove to you guys that, you know, we're in a file. Uh if I click on this index.html here, you see that I actually have like a website file set up here. HTML is the um ending for websites basically. And uh you know, there's a bunch of different text here in this middle editor.

basically. And uh you know, there's a bunch of different text here in this middle editor.

Doc type, HTML head, meta, right? I don't actually know what most of this stuff means. I just have my agent deal with it. But it is important from time to time to at least be able to poke into the file and and do things and stuff like that. Just like you can do with any file explorer, you can create

new files here. So I can make like another file MD. Then I could write stuff. Hey stuff. Okay.

Um you can also delete files. So rightclick and then you can you know delete, rename, open timeline. You can do all sorts of random stuff with this. But I just want you to treat

open timeline. You can do all sorts of random stuff with this. But I just want you to treat everything on the lefth hand side as basically your average run-of-the-mill file explorer. And

then the stuff in the middle you can almost treat like like notepad on Windows or like Apple notes in the middle. Um it's just because in programming typically specific character sequences are tied to specific pieces of functionality. You'll see here that like it's quite colorful like link tags look a specific way. This thing looks another way. If I go into I don't know this Tailwind config. You

see we now have the color purple and and yellow. Basically they just make it look like a freaking rainbow. And that's cool cuz why would I be working on something gray dull and featureless

rainbow. And that's cool cuz why would I be working on something gray dull and featureless if I could be working on a rainbow instead? On the rightmost side of the file explorer, you also have the ability to like um have like a quick highle overview of the file. So that's kind of neat.

I don't know if you guys could tell super well here, but this is basically like a I don't know, it's like a a level of abstraction up. It's like a window that allows us to scroll up and down.

This is useful if you're looking for specific things within the file. Although I'll be honest, I mean like nowadays, as I mentioned, I don't really use the editor too much. And then up at the very top right hand corner, this is relevant if you run any markdown files. If you click on this little button here, and by the way, most files nowadays where you communicate with the model

are going to be markdown files. Instead of it looking kind of like dull and drab and you know, all this tiny text here, if you click on this little button here, you'll actually open what's called a markdown preview. And then this markdown preview will actually like make the text the way that it's supposed to look. So every time in markdown, you have this little like number

sign. What that actually refers to is that refers to like a heading. And that's like the really big

sign. What that actually refers to is that refers to like a heading. And that's like the really big heading. If you have two, then that's a little smaller heading. Then you have like text down

heading. If you have two, then that's a little smaller heading. Then you have like text down here. So, most of the time, this is what you guys are probably more familiar with. And to be honest,

here. So, most of the time, this is what you guys are probably more familiar with. And to be honest, a lot of the time, if I just want to like take all this dense stuff and then make it look a lot better, I'll go back to um my browser and then I'll go to Google Docs. And then what I'll do

is I'll actually paste this in. And then I'll just change the text color to black. And then

now everything here just looks like a big Google doc. And I can read through it. And you know, I see like orders of um hierarchy and and stuff like that. Not super important, but good way for you to like quickly take a look at prompts. Okay, a couple of quick hotkeys here. Um,

you can go forward just uh with this. You can go backward with this. It's the exact same hotkeys that you use on um, you know, Windows or Mac to like change tabs and stuff cuz basically what we're doing is we're just changing tabs. So, if you're alt tabbing, you can alt tab through files like that. Super easy. And then you'll also notice that there's just different types of files

depending on what you're looking at. So, we talked about markdown. This is a JSX. This is a CSS. This

one over here though is actually a Gemini specific one called walkthrough where it runs you through what the AI uh basically wants to do next. It basically teaches you what it's doing. It's kind

of neat and we're going to cover a lot more about that later. But there's cool features like review, you could submit a comment, you could ask the model for stuff and and download it as well which is kind of cool. Okay. And then finally just to round out our AD20 on the right hand side we have the agent panel. And this is where I'm going to spend most of my time because as mentioned this

is where like AI does most things for us nowadays. And we don't actually have to worry too much about the folders or the files or the code. What we worry about is we just worry about specifying what we want in natural language. That's really what like the vibe and vibe coding is all about. Okay.

So, starting at the very top right hand corner, if you want to start a new conversation, you just click this button. Now, we don't actually have any text in our current conversation, so I can't start a new one. If I just write a, then I can click this. Now, I'm in a new conversation. You'll

also see down here that our history is populated. And we can see 4 seconds ago, I had the letter A.

Uh 24 hours ago, I asked some questions about background images loading and stuff like that.

really quick and easy way to create a new convo. Um, you can obviously also just use hotkeys. So,

command shift L will just automatically pop one up and then, you know, every time you type, you can just make a new one and so on and so forth. Over here are past conversations and so this will have uh basically a list of every conversation I've ever had with AI. So, refining prompt for website generation 47 minutes ago. This is something that I produced. Uh, when you click on that button,

it'll say, "Hey, should we open in the current window? Should we open in a new workspace?" So,

what I'm going to do is I'm going to open in a new workspace. It'll open up a new folder. And

now it'll actually pull through my conversation as well as the specific file that I had open when I did this. In my case, I was preparing a website uh prompt basically a website generator prompt

did this. In my case, I was preparing a website uh prompt basically a website generator prompt for this course uh which is right over here and I was just having a back and forth for that. On the

right hand side, we also have additional options which allows us to do things like customize and MCP servers. Customizations are pretty cool. Basically what you can do is you can define

MCP servers. Customizations are pretty cool. Basically what you can do is you can define highle rules that guide the behavior of your AI model. So, we're going to get into ways to steer things as I mentioned in the um sort of outline of this course, but rules are really quick and easy ways that you can either set globally or within the specific folder that you're operating, okay,

to either control all instances of every line of code or every conversation you have with Gemini or you can do that within a fold. So, you can see here I technically already have a rule and it's called cinematic landing page builder role. Your role is to act as a world-class senior creative technologist and lead front-end engineer. you build highfidelity cinematic one

to one pixel perfect landing pages. So this is sort of like my highle um workspace rule that helps constrain the behavior of the model. And you know this is actually pretty long, right? Like you could scroll down this for quite a while. Um this is one of the reasons why I have

right? Like you could scroll down this for quite a while. Um this is one of the reasons why I have pretty good vibecoded quality because I basically put in a lot of style guide and highle information to help the model you know make quick decisions on the fly without having to ask me for stuff. So you

can define that both globally or a workspace. If you just click the button then you can enter the information right over here. You click this button and you can just um create your new rule. So maybe

I want it to be called design guide. Oh, and you have to use um you know hyphens in between each.

You can't actually have any spaces. I'm just using a little voice transcription tool. In this case, this one's called whisper flow. Um and then you know you can basically specify an activation mode.

Is it always on? Is it manual? Do I set it? Do uh I leave it up to the model or do I do glob which applies specifically to files that match some file pattern? In practice, I never use glob. I never

use model decision. I never use manual. I always use always on. So in this case, I'd say, hey, when you design websites, I want you to stick to a minimalistic, sleek aesthetic. I want you to build things that are significantly closer in design to, let's say, the Apple homepage than anything else.

And I can populate that. If I wanted to run this, I would just save this file. And as you can see, we've now added that as a rule. Now, I don't actually want this rule here. Um,

so what I'm going to do next is I'm just going to delete this. The way you do so is every time you generate a rule, it's now created inside of agent/ruules folder. So if you want to delete it, you just delete that. And now we're back to just that one rule which is called the gemini.mmd. This

gemini.mmd is basically just the parent rule that always applies if you have a file called capital gemini.mmd in your workspace. All Gemini models will just always take that as a rule. Um multiple

gemini.mmd in your workspace. All Gemini models will just always take that as a rule. Um multiple

different ways to define rules and stuff like that as well. Not super important. There's also

workflows which I think are probably nowadays better understood as skills where basically similarly to rules you can define behaviors or specific sequences of steps that you want your agent to take every single time. So these can be pretty cool and you can again define them as global or workspace. So I could call this I don't know code review here. I could say this

workflow defines a code review process that goes through the code and then maximizes the security of the vibe coded app. To start with, I want you to reference this document. This document includes information about all sorts of high ROI security practices for vibe coded apps. After you're done, I'd like you to go through each of these step by step. Uh make small incremental changes to

the codebase. Try not to, you know, do everything everywhere all at once. and then verify with me

the codebase. Try not to, you know, do everything everywhere all at once. and then verify with me at the end that it works by asking me to test it before we push to production or anything like that. And so, you know, in this case, what I've done is I've I've built some quick little

like that. And so, you know, in this case, what I've done is I've I've built some quick little rule here. And then maybe over here is where I put like my security stuff. And now, you know,

rule here. And then maybe over here is where I put like my security stuff. And now, you know, what I have is I have a quick little workflow that after I'm done building my vibe coded app, I can just say, "Hey, I want you to run the code- review workflow." and then it'll just go through this standard operating procedure, the sequence of steps, more similar to like the way that a

business would operate with checklist style tasks. Again, I don't actually want this. Um,

so what I'm going to do is I'm going to go back here. I'm just going to delete this.

That'll delete the code review customization. Now, there's also some other customizations like MCP servers. I'm going to talk a little bit more about MCP servers later. But the way I want you to treat MCP servers for now is basically it's just a way to define workflows. It's just

um workflows that somebody else did for you. And so these MCP servers essentially allow you to connect to different tools and then run standardized workflows on those tools. So for

instance, if I wanted to use a server like a PostgresSQL, there's a pre-existing workflow bundle here called CloudSQL for PostgrSQL. This is a specific database language and specific type of database. This basically just defines a checklist series of steps that the model will always do to communicate with us that I don't know can translate my natural language queries

into that if I wanted to. Same thing with Looker. Same thing with GitHub, Neon, Stripe. Basically,

these just allow us to communicate with different tools in a very predictable way, which as I'm sure you can imagine if you're building high quality vibe coded apps can be pretty useful. That said,

there are also some downsides to MCP server. So, I don't really use them a lot in practice, and we'll cover all that stuff later. For now, I don't want to overwhelm you. Okay, next up, we have the title of the current folder. As you can see, this one's just called website-builder, not rocket science. Then, we have the ability to add some context here to our prompt. So, if I wanted

rocket science. Then, we have the ability to add some context here to our prompt. So, if I wanted to, I could add media. I could add mentions. And I could also add workflows. Remember the little workflow that I put together earlier and then deleted? If I had workflows, every time I wrote slash, I would automatically be able to add them here. What's cool though is you can also mention,

and when you type mention or or you just press at, then you can actually attach files, directories, uh, code context items, rules, even terminals, pre-existing conversations, and then also MCP servers into the context. And the reason why this is valuable is because, you know, I could just copy everything in this file and paste it in, or I could just say, "Hey, I want you to reference this

gemini.md." And then it would do the same thing, but as you can see, I'm not really polluting this

gemini.md." And then it would do the same thing, but as you can see, I'm not really polluting this big window. It's very clear and clean. After that, you have the mode. Now, there are two conversation

big window. It's very clear and clean. After that, you have the mode. Now, there are two conversation modes available to Gemini 3.1 Pro right now. There's planning and fast. This may change at a certain point in time, but for now, this is more than enough. In general, you always want to start in planning anytime you're designing or building a new feature. Planning is good because it basically

allows the model well almost forces the model to do a lot of thinking before it actually like you know stretches its fingers out in the world and starts manipulating files and stuff. It then

actually presents you a workflow and says hey this is what I'm planning on doing. Are you sure you want me to do this? And then you can set your own behavior to either auto approve which is just have it run on its own um decided plan or you could actually stop it and say hey I didn't really like

what you did here. I want to make a minor change. Next up you also have fast. fast just allows it to execute things directly and go really quickly. And so this is actually pretty useful if you're doing quick one-off tasks. Hey, I want you to change this file format to this file format. Hey,

I want you to change this markdown file to a txt file. Hey, I want you to, I don't know, refactor XYZ really quickly with this um, you know, brief little variable in mind or something like that.

Okay, so in general, I always start with planning and then at the end um, you know, when I'm just doing one-off tasks and stuff, if I need to, I'll use fast. Underneath, we have the model picker, which I've already covered. includes the specific one you want to pick and choose and actually have in communication with. Remember how earlier I said the agent is just like a wrapper for the

um specific model you're talking to. Well, this is how that works, right? This chat window isn't communicating with all models right now. It's just communicating with one, but I can hot swap them anytime. Instead of Gemini 3.1 Pro high, I could easily choose Gemini 3.1 Pro Low. And you'll find

anytime. Instead of Gemini 3.1 Pro high, I could easily choose Gemini 3.1 Pro Low. And you'll find that every model has different pros and cons. If you want a quick example of pros and cons, just go to Google and type Gemini 3.1 Pro High versus Low. And what you'll do is you'll have um you know basically benchmarks showing you how high quality the models are at different things. Uh

use usually some sort of like graph here that runs through hey you know highs 44.4% on this benchmark lows 39.8% on this other benchmark and so on and so forth. I will say in general I tend to just use like the best models currently available and to be honest that's usually the most recent model that has been pushed out by the big three companies right now which tend to be Google um OpenAI and

then Anthropic. Uh I was all about you know claude uh Opus 4.6. six just last week. Um, now you know,

then Anthropic. Uh I was all about you know claude uh Opus 4.6. six just last week. Um, now you know, Gemini 3.1 Pro High seems to be very, very good at like design specific applications. So, what

I'm doing is I'm passing off my design stuff to Gemini 3.1 Pro High. Then I have Opus 4.6. Kind of

clean stuff up on the back end. Yeah, this is how you select through a bunch of different models.

And as you can see, it's just like Lego blocks. They're hot swappable. Gemini 3 Flash is super super quick. Sauna 4.6 is a really long context window. A lot of these have pros and cons. Um,

super quick. Sauna 4.6 is a really long context window. A lot of these have pros and cons. Um,

nobody really uses this in practice though. Okay. And then finally, um you can click this button to replace your texting with basically talking. So what I'm doing right now is I'm just having a normal conversation with it. When I press this button, um you know, and then I I send it, Gemini has a built-in uh mechanism to just transcribe what I just said and then turn that

into text. The reason why this is valuable and why you're seeing a lot of people use voice dictation

into text. The reason why this is valuable and why you're seeing a lot of people use voice dictation tools nowadays, it's because on average, people speak much faster than they write. If I'm writing at 50 to 80 words per minute, I can speak at like 150 to 200 words per minute. So, it's obviously a lot faster and a lot quicker. Now that I've actually sent a message, you could see how the

UX has changed a little bit. We now have a thought little tab. This basically runs you through the internal thoughts of the model. The reason why they make this present and visible to you is because if it's making any sort of like egregious error, you can just quickly dive in and say, "Okay, so why did it make that error?" This gives you some transparency, some accountability, and

then you can, I don't know, adjust your feature prompting style to be better to solve that issue.

It's also good because sometimes the models are lazy and they don't really respond because they're trying to conserve tokens or whatever the heck. This is a quick and easy way to like make sure that the internal thing is not uh the user asked me this question. I don't really want to spend a lot of tokens. So I've decided to give them a much simpler answer. This is how you can actually just

figure out what's going on under the hood. The text that is not sort of this darker thinking tab is uh the response. And so in this case to get started on building a cinematic landing page, please please answer the following questions. The reason why it's running me through that is because I've defined that as basically my highle workflow rule uh or sorry just rule in gemini.mmd. I'm

saying hey you know I want you to act as a world class senior creative technologist when the user asks something immediately asked exactly these questions and then it's asking me these questions.

So basically this is taking everything from that initial configuration file and then despite the fact that my voice message said nothing of any import uh it just injected that up at the very top and now it's trying to you know do my my higher level rule instructions. Okay so underneath you have good or bad. Uh this is just a way that you can help train the Gemini models on like

hey I like this response. Hey I don't like this response. I never really use that in practice.

And now you can see that there's also a bunch of additional tabs that I've opened up here. On the

lefth hand side there's changes overview. if your request changed any files um you know on your work inside of your folder that's actually going to pop up right here and then you can just take a look at them in practice nowadays basically nobody takes a look at these they're just like oh yeah man you figure it out you got it uh next up is terminal so sometimes Gemini or other models will launch

terminal instances for you can actually see the background processes running in that tab artifacts or files that are part of the conversation so you know I added this gemini.md file for instance I mentioned it right and then over here we have the browser and this is kind of neat you can actually launch a browser are inside of uh Gemini nowadays. Um this browser, you know, I'm not going

to say it's like the highest quality browser on planet Earth, but it can be pretty cool. If I go over here, you could see um we're going to keep it. We're now opened on the anti-gravity uh docs page for browser. And so, you know how some things in life you can only really do on a browser? You

can't just do everything via API or you can't do everything like through a chat window. This

is basically a quick and easy way that allows you to do that. And I'm not going to say that this is like super super valuable or really really all that helpful right now, but you know, it's pretty cool and obviously they're trying to push more towards browser automation. Okay,

so hopefully you guys now know everything about how to use anti-gravity and then the Gemini series of models. What I want to do next is I just want to give you guys a quick run through of Claude

of models. What I want to do next is I just want to give you guys a quick run through of Claude Code because we're also going to be using that. Basically, the Claude large language model lives within the Claude code chat software which we also wrap inside of anti-gravity. And so just the exact same thing that we just did with the agent chat, we can do with the Claude code chat as well. So

what I'm going to do next is I'm actually going to exit out of this view. Okay? And then I'm going to sign up to Claude. Now, in order to use Claude Code, you do need an account. So what you have to do is you have to go over to claude.ai. That'll take you to a page that looks like this. And

then you can enter some information here and then continue with your email. I don't actually have an email called asf asdf asdfgmail.com. If I would, I'd probably be a billionaire. Um, basically

what'll happen is they'll send you a link over to your email. You can click on that link and then it'll sign you in. From there, you have a brief little onboarding that you need to fill out and then that'll take you to the most important part, which is the pricing. Now, the way that the plans work for Claude Code is you need to select between the pro or the max plan. Pro plan is $17 a month

right now. The max plan starts at 100 and it can be significantly higher. Unfortunately, right now

right now. The max plan starts at 100 and it can be significantly higher. Unfortunately, right now they don't allow you to use quad code within a free plan. That's just part of the limitations of using the cloud family of models and it's just always a trade-off with these things, right? Like

if you think about it, Gemini allows you to use things for free. Uh Google, sorry, allows you to use Gemini for free despite not having to pay any money, but then you have quite limited usage.

Whereas Cloud Code requires you to sort of put a certain minimum amount of money, in this case 17 bucks a month in order to use it, but then it tends to be a lot better at specific applications.

So you don't have to necessarily sign up for this, but if you did want to sign up for it, if you wanted to use um you know, Vibe Coding in a way that I'm going to show you in this course, you would have to have some sort of subscription ongoing. I don't want to push you guys to sign up to anything. I'm not affiliated with, you know, Anthropic. I'm not affiliated with Claude Code.

to anything. I'm not affiliated with, you know, Anthropic. I'm not affiliated with Claude Code.

I'm not pushing any specific product on you in this course. I will just say that I, as a business owner, uh, you know, I get a tremendous return on investment from this stuff. Just a few months ago, in order to hire a developer at the level of Cloud Code or, you know, Gemini with an anti-gravity, I would have had to spend 20,000 to $30,000 a month. I would have had to go down to Silicon

Valley and find like a super cracked dev and then hire them on my team. And those people would work eight hours a day max. Um, this stuff does 24 hours a day. This stuff you can plug in APIs. It's

totally automatable. This stuff gets smarter every day, week or month. And so this is really like the technology of the future. Um, I probably get at least 100x ROI on the money that I spend and I'm spending like $200 a month, right? So that's that for Claude. Once you're done signing up, um, what'll happen is we can go back to anti-gravity, go to this bottom lefth hand

tab here called extensions, and then click cloud code for VS Code. Now what this is is just like the agent chat on the right hand side is the way to communicate with the Gemini series of models.

This is built by Google. Okay, this is built by Enthropic and it's just a little extension chat that you can put into in gravity. And so what I've done here is I've already installed it, but you'll have to install it. When you get it installed, what you can do is you can click on this little button in the top right hand corner. That'll open up a clawed code window just like this. Okay. And

as you see, very similar UX to what we had earlier with the agent chat. Just this time now it's sort of like cute and orange and there's a little space invader over here. So really quickly to run you through it, if this is the very first time you've done this, you do need to go /lo. Okay,

that'll allow you to log in to your Claude AAS subscription which you just put together a moment ago. You can also sign in through the anthropic console or these other thirdparty providers. Most

ago. You can also sign in through the anthropic console or these other thirdparty providers. Most

people for cost purposes are going to choose this as the cheapest one. After that, you just write a message like, "Hey, what's up?" Now, just like you were communicating a moment ago with Gemini, now what we're doing is we're communicating with a different model. And you can find out which model by clicking the bottom right hand corner and then going to switch model. And so,

right now, I'm using this default recommended one, Opus 4.6, most capable for complex work.

There's also another one, Opus 1 million context. There's Sonnet, Sonnet 1 million context, Haiku, and then uh some custom 4.6 model down here. I think if you guys are keen viewers, you'll probably say, "Well, wait, Nick, didn't we have the ability to communicate with the Claude series of models down here?" And the answer to that is yes. Uh for whatever reason, I guess just because

of the nature of their business arrangement, um inside of the agent chat and anti-gravity, Google actually allows you to communicate with the Claude series of models as well. But in my experience, and I don't know if this is because they're trying to handicap it or something like that, but like in my experience, it just doesn't work as well inside of that agent chat. And the UX is

actually much better within the Claude chat. So, what I typically do is I just communicate with the Cloud series of models in Claude Code and then I communicate with the Gemini series of models in their built-in anti-gravity agent chat. And that works really well for me. Um, also

it doesn't it like simplifies my payments. So, I'm like paying one provider for one sort of model and then another provider for another sort of model. Obviously, your mileage may vary with that. And

maybe it's just the vibes and vibe coding that are getting to me. I much prefer to communicate with Claude in the Claude code extension. Anyway, hopefully it's pretty clear. Same thing. You

have little text windows, right? This is its reply down over here. Just like in um Gemini, we had a few modes like planning and so on and so forth. In this one, we have um ask for edits, edit automatically, plan mode, and then also bypass permissions. Uh most Gemini is automatically set to bypass permissions now. So, you don't actually have to like manually set it. Ask

before edit is just where if you want to change the pre-existing files on the lefth hand side, you need to just like verify with me first. So, if I say change readme.md to include a snippet about Nick Sarif, okay? And then I ask it to do this, what it'll have to do is it'll have to go find some information about Nick Sarif. Then it'll have to read it. Then it'll have to make some proposed

adjustments. But do you see how now we have this little panel that's popping up saying, "Hey, do

adjustments. But do you see how now we have this little panel that's popping up saying, "Hey, do you want to make this edit?" So I could say yes. I could allow all edits this session. And I could say no. Or I could tell Claude what to do instead. I'm just going to escape out of it. That's how Ask

say no. Or I could tell Claude what to do instead. I'm just going to escape out of it. That's how Ask Before edits works. Most people are going to use edit automatically because then you can change pre-existing files without actually having to like do that little, you know, hey, should I change this? Uh because nowadays these models just move so much faster than human beings ever can. There's

this? Uh because nowadays these models just move so much faster than human beings ever can. There's

just no need to. And then finally, you have plan mode, which is similar. It just does a lot of thinking. Doesn't actually do anything until it presents the plan to you. And then finally,

thinking. Doesn't actually do anything until it presents the plan to you. And then finally, a bypass permissions, which is uh you know my yolo mode where I just say do it again and then it's not going to ask me for anything. It's just actually going to go edit the file. Right. So

now it says built by Nick Sarif. I'm a software engineer and automation consultant specializing in AI powered tools and web applications. Thanks so much. The software engineering title has never been easier to get. Okay, everything else you are going to learn by doing. Hopefully, this

has been a comprehensive setup and you guys now know how anti-gravity works in conjunction with the agent chat and then the Gemini 3.1 Pro series of models. You also know how anti-gravity works in conjunction with Claude Code and then the Claude series of models. And you also understand the interface, at least the 8020 of the interface that we could use to build our very first project. Next

up, what we're going to do is we're going to build a highquality, simple portfolio site in just a few minutes that I'm then going to push live onto the internet. I'm doing this because I want to show you guys how simple and easy it is to actually develop like actual web applications and web properties with Gemini 3.1 Pro High. And I'm also going to include all the prompts and everything

you need to do the same thing on your end down below in the description. So, just check that free folder out. Okay, so the simplest and easiest way that I have found to set up websites with Gemini

folder out. Okay, so the simplest and easiest way that I have found to set up websites with Gemini 3.1 Pro high is you literally just provide it a simple copy paste prompt which I have down below in the description and you guys can use as your end all be all or you guys could use as a base to

make your own prompt on top of. Okay, store that as a gemini.md and then just fire it off. So, what

I've done here is I basically open up a new folder called website builder-demo with the gemini.mmd

with this big long prompt. And I'll run through the prompt in a second while I'm actually creating the website. But then I say build me a website. Now, what this does is this forces the model to

the website. But then I say build me a website. Now, what this does is this forces the model to act as a world-class senior creative technologist and lead front-end engineer. Basically, we're

saying you build highfidelity cinematic 1:1 pixel perfect landing pages. Every site you produce should feel like a digital instrument. You must eradicate generic AI patterns, including typical structural layouts like a standard hero, three column features, and CTA. Every site you build will use a vastly different structural layout, typographic scaling, and interactive paradigm based on the chosen archetype and structural typology. Kind of a mouthful, right? Now,

I'm not going to run through all the rest of these, but basically, to make a long story short, this section here is just guiding it through a brief little Q&A so that you can choose, you know, the highest quality website design for you. This over here has a bunch of different aesthetic archetypes depending on what you're looking at which we can select. Down below we have some structural typologies including bento grids, split screens, infinite horizontal structures,

linear narratives, and then application shell which is kind of neat. Then we have some brief little rules about different tools to use just based off of my own understanding of tooling. Um

as well as um some double-checking protocol down here. And on the right hand side, as you can see, after I entered that little uh message, it's now asking me for the brand name, the core thesis, um aesthetic archetype, structural typologies, three core pillars, and then the ultimate conversion goal. So, all I'm going to do now is I'm going to close out of this. Okay. Make this way way

goal. So, all I'm going to do now is I'm going to close out of this. Okay. Make this way way bigger just so I could see like most of it. And then I'm just going to enter my information. So,

uh my brand name, just so people are all on the same page as me, is called Leftclick. And

basically what we are to zoom way in there because the website looks like trash right now is we're the definitive AI growth partner for fastmoving B2B companies. This is a website that I actually had a real developer like I paid somebody money to put this together for me cuz I didn't have the time. And the whole idea is we're like an AI automation boutique shop that helps people

the time. And the whole idea is we're like an AI automation boutique shop that helps people generate revenue using high growth systems. This is typically stuff like cold email systems. It's stuff like speed to lead systems for paid ads and so on and so forth. So it's pretty neat, right? It's pretty sexy. We got the cool photo with Hormosi and Ovens over here. That's uh won me

right? It's pretty sexy. We got the cool photo with Hormosi and Ovens over here. That's uh won me some goodwill for sure. Basically, what I want to do is I just want to have AI try and generate uh this website instead of me. And then I just want to compare and contrast the results. You'll see

there's some mild things here like there's a cool little animation that kind of follows my mouse around. That's kind of neat, right? Obviously the text and the fonts and stuff that those are

around. That's kind of neat, right? Obviously the text and the fonts and stuff that those are very sexy. So, do you think AI could do as good of a job? Well, let's find out. I'm going to

very sexy. So, do you think AI could do as good of a job? Well, let's find out. I'm going to answer some information here. Brand name is called Leftclick. We help high growth B2B companies scale revenue using outbound methods like cold email. Two, pick best fit. Three, pick best fit. Four,

super low cost of acquiring a customer. Um, AI based personalization, which lets us attack at both scale and high levels of perceived personalization. And then trusted vendor.

We've worked with multi-billion dollar portfolio companies. And then ultimate conversion goal is book a growth mapping call 30 men consult. Just going to enter this information now. And I'm going to have the model do everything else for me. The first thing that's going to pop up is this little thinking tab. And so what it's doing if I scroll to the very top is it's focusing on refining the

thinking tab. And so what it's doing if I scroll to the very top is it's focusing on refining the initial approach particularly concerning file operations. It's prioritizing the use of more specific resources to manage and manipulate information and so on and so forth. These are

all of its own thoughts. And basically the way that this works is at every step it's basically like another it's like another run. It basically takes the prompt, it sends it, it does a bunch of thinking and then it sends that back to another instance and says what's next over and over and over and over again. So that's what's happening down over here at the bottom. Once you're done

something that requires a fair amount of planning, it'll actually pop open a planning uh section. And

this basically runs through the files that were edited as we saw earlier. Okay. the progress

updates of that, some additional thinking, and then finally a task list for what it's planning on doing. When tasks lists pop up, they pop up in the middle over here. And as you can see, we have

on doing. When tasks lists pop up, they pop up in the middle over here. And as you can see, we have a leftclick dashboard landing page. It's going to start by scaffolding the application using a particular library. Then it's going to install dependencies, configure Tailwind, then it's going to build a core layout, and then, you know, go through and do things in a really high quality

way. Okay. So over here, what it's doing now is it's running a terminal shell. Terminals just look

way. Okay. So over here, what it's doing now is it's running a terminal shell. Terminals just look like this. uh running background command. Anytime you see anything like this with this little

like this. uh running background command. Anytime you see anything like this with this little terminal icon, it's basically just doing the thing in the terminal for you. Um you can actually just jump to that anytime you want to. And here you can actually see like what it's communicating with, what it's doing. You can also see the artifacts. So there's now two artifacts that it's created.

One's called uh the task and the other's called the implementation plan. Both of these here are basically just resources for you to make things a little bit more visible. Like logically speaking, this model is doing a lot under the hood, right? writing hundreds, thousands of of words basically every few seconds. Um I have no insight into this. This is all just occurring behind the scenes.

And so one of the big issues right now with vibe coded apps is there's just no interpretability or accountability about like what the model's doing underneath um you know behind everything. Well,

this implementation plan, the whole idea is it just like shows you behind the scenes what's going on. Well, it's decided on some AR aesthetic and typology decisions like um B2B SAS dense. We want

on. Well, it's decided on some AR aesthetic and typology decisions like um B2B SAS dense. We want

gunmetal safety orange steel. The typography is going to be IBM Plex suns, IBM Plex mono, right?

These different fonts and so on and so forth. The application shell is going to look like this. The

proposed changes are going to look like that. As you saw a moment ago, we just added a file to our folder called leftclick- dashboard. If I give this button a click, you'll see we now have a bunch of files that it's written. The model just wrote all of this while I was just talking to you guys, and it's currently writing more, right? Which is pretty neat. I don't know how any of this stuff

works, to be honest. And I don't need to anymore. I just vibe code. If I like it, fantastic. If not,

I I'll ask for changes and I'll show you guys what that loop looks like in a second. But yeah,

I mean, you know, as you guys see, a big chunk of this is just shephering AI and making sure that it's operating in in the right direction, the direction that you want, as well as looking over things like implementation plans, intermediary files that are created, and stuff like that to just ensure that like everything is going the way that you initially planned. What I'm going to do

next is I'm going to go grab a sip of water and then I'll come back and hopefully this website will be ready to go. Okay. And here is the result. Deploy the growth engine. We build growth systems for high- rev B2B agencies. Pure information density, zero latency scaling. Wow, that's

cool. Ooh, I love that button. That's really nice. Uh, if you guys watched one of my recent videos on website design, this is the same approach. So, I actually really like the background image as well. And so, I uh turned I basically gave it the ability like the prompt that you guys are going to

well. And so, I uh turned I basically gave it the ability like the prompt that you guys are going to use if you copy the prompt and use it in your own. Basically gave it the ability to like find stock image websites and stuff like that. And that's how we end up with like this really nice clean like glass ISO form thing up at the top. then have some cool uh you know sections here. Rapid revenue,

lowest cost, proven vendor. That's really cool. We focus on systemic growth. I like that. I like the blue this time. We got some cool animations and stuff like that. You will find, you know, because we're using the same icon libraries and stuff, some of these animations will be pretty similar.

If you redo this five or six times, but yeah, I mean like we just we just one-shoted a really cool website, right? Um I'm just going to do the same thing now a couple times just to show you guys

website, right? Um I'm just going to do the same thing now a couple times just to show you guys that you don't have to stick just to the style. You could do it in a bunch of different ones, too, if you wanted to. Okay. So, I'm just going to open up a new folder here. And then I'm just going to make one website builder new. And then I'm just going to operate inside of this folder.

Okay. This is another rendition. So, I think this is supposed to be like kind of earthy and healthy, which is why it says leftclick with the globe. That is definitely not our brand, but what are you going to do? We're the architect of outbound scale. We weaponize personalization by designing and deploying outbound architect for multi-billion dollar portfolios. Kind of really like that

section too much. Here's probably the weakest bit, though. This stuff looks really cool. Like like I I really like this. Look at that. This looks nice as well. You know, it's like something it came up with to showcase how we're verifying decision maker profiles. We're trusted by the best. You

know, we're architecting the revenue engine. So, this is a great example for me to show you how you can change websites to make things better or uh I don't know, you know, include sections that you want. So, what I have here is I have a voice transcription tool. And you know what? I

I I don't really like I don't know, I just don't really like the layout here. I think personally the navbar is kind of an issue. So, what I'm going to do is I'm going to go and I'm going to see if I could find a navbar from something else and I'm just going to include a screenshot.

So, like this navbar is actually really cool, right? Like this this is clean. So,

why don't I just take this navbar from my former site? Okay. And then why don't I also just create a big voice prompt about all the things I want to change. Hey, I have a navbar that I've supplied you with. I want you to make it that sort of pill style because I think it's really high-end

you with. I want you to make it that sort of pill style because I think it's really high-end and clean. I don't need the Earth logo next to left click. You can just use uh left click. Um,

and clean. I don't need the Earth logo next to left click. You can just use uh left click. Um,

we should have buttons on the hero header. Also, just make the hero header way bigger. I want it to be like huge. I want the content in there to just pop and and explode. There's some weird numbers next to the hypereefficient acquisition graph. Um, they're outside of the bounds of that little box. So, let's fix that up. Um, let's add another section between scale without compromise

little box. So, let's fix that up. Um, let's add another section between scale without compromise and trusted by the best. That just talks about me. My name is Nick Sarif. I run Leftclick. I've

helped uh I don't know over 400 500,000 people now use AI automation and then outbound methods to improve their lives and their businesses. Um you can do a quick little Google about me as well if you want. And then down at the bottom, um let's just add a footer in addition to the CTA so that it's just a little bit thicker and there's more going on. Okay. And then I'm just going to

dump that right here. And I'm just going to dump that right here. So boom. Let's just remove that.

Uh and then Yeah. And then I'm going to paste. I guess I got to paste the image, right? Yeah.

There you go. Cool. So, now that I've I pumped all this stuff inside, um I'm just going to wait for it to finish the change and then I'm going to double back. Meanwhile, I designed another website simultaneously uh for my content writing business. Once I can copy. So, I like this. This is really clean. We then have that little pillow up top with similar three card design here with some

clean. We then have that little pillow up top with similar three card design here with some text. That's neat. Uh we also have these cards that kind of come up. I really love these cards.

text. That's neat. Uh we also have these cards that kind of come up. I really love these cards.

These are really clean. And then down over here at the bottom, we have some pricing. So, that's nice.

Anyway, I just wanted to show you guys that while we're waiting for the other leftclick site. Okay,

and I can see it's saying the dev environment is still running. So, I'm just going to copy this. Go back here and paste this in. And this is way bigger. Look at that. This is huge. Nice.

this. Go back here and paste this in. And this is way bigger. Look at that. This is huge. Nice.

This is significantly better. I'd say that's about the size that I wanted. And then up here, I think it's basically just one for one copied the font. So, I'll just make one more change, which is to make sure that the style of this aligns with the style of the site. Hey, just want to make sure the style of the pill navbar aligns with the rest of the style of the site. Super clean. Nice job on

everything else. Oh, and I'll supply you an image that you could use. Um, for me, that will help.

everything else. Oh, and I'll supply you an image that you could use. Um, for me, that will help.

Really like the footer as well. It's pretty clean. Let's make the green just a little bit darker, actually. Um, that's probably the last thing that I want to change. Everything else here looks nice,

actually. Um, that's probably the last thing that I want to change. Everything else here looks nice, though. Man, there's a lot of images of me out there. We'll go large. What makes sense? Which

though. Man, there's a lot of images of me out there. We'll go large. What makes sense? Which

one makes me not look like a seven-year-old? probably this one. Let's just do that. So, I'll

go here. I'm going to copy both the image and the agent, I think. So, we'll just dump that in. So,

I'm just going to copy this here, and then I'll paste this in. Okay. And then, yeah, I should be good. And this is the finished product. Uh, what I like is when I load it, there's that little bubble

good. And this is the finished product. Uh, what I like is when I load it, there's that little bubble that goes out. You know, it expands at scale. Uh, navbar is looking nice and clean. When we mouse over it, it's green. We have everything that I asked for, including a picture of myself with like slightly darker green. And yeah, I mean, like, you know, is this again going to win any

awards? Probably not, especially since website design is so commoditized these days. But now

awards? Probably not, especially since website design is so commoditized these days. But now

that I've showed you how to build sites, not just one site, multiple sites, by the way, and probably a hundth of the time it would have taken you to do uh websites the old school way. And I know that cuz I used to be a website designer. I used to get paid for stuff like this. Melts my heart.

Let me show you how to deploy it and how easy it is to actually get a website like this up live on the internet uh with Vibe Coding. So, basically what you're going to need is you're going to need a hosting provider. Now, I use Netifi because it's simple. It's uh free for a couple of sites anyway, but you can also use Verscell and there are a few other ones that are like this. Basically,

what happens is they just take these sites that we just put together. Okay, so whatever this, you know, link is here that I'm opening up and then it takes the static files on your computer that you're currently accessing at localhost 5173 and then it just like puts them on a web accessible URL. So, we're going to have something like gentlebeaver uh.netlifi.com

and we don't need to spend any money in order to get that done. It's completely free for us. Um,

it'll only cost us money if we require like a custom URL like leftclick.ai for instance. So, I'm

going to go over to netifi.com. Uh, and then I'm going to, you know, if it's your first time there, sign up. I'm just going to click login. And I have a bunch of different projects down over here,

sign up. I'm just going to click login. And I have a bunch of different projects down over here, um, that I've hosted on Netlefi before, right? So, make money with make reply robot leftclick go one second copies. You can see I've had quite a few startups that have failed. Uh, and what I'm going to do now is I'm just going to click add new project. And then uh you know I'm going to click

deploy manually and then I can just drag my drop drag and drop my project folder here. So simply

put I'm going to go back to my um anti-gravity and then what I want is I just want to rightclick this and say reveal and finder. I'm just going to drag this whole file in. Okay, this whole thing.

And what it's going to do is it's going to try building and deploying. Now the probability this is going to work the very first go by the way is pretty low actually because we're not giving it any additional settings or anything like that. So, I mean, I'm going to look for it, but I doubt that it's actually going to oneshot it. If it does, I'd be quite surprised. Wow, that's so funny. It

just did. Uh, that's hilarious. I wasn't expecting that. I was going to expect communicating with an agent to get it done. But anyway, yeah, we just drag and drop the folder in Endearing Salyaki.

And as you can see, our whole website is up. It's actually up on the internet now. It's not up um, you know, where it was before. So, I'm just going to open an incognito window just so you guys are 100% confident that it is on the internet. I just accessed this. Why don't I um, load this up on my phone, too. endearing. Okay. And I don't know if you guys could see this,

but like that's the website. It's just on my phone now. It's on a totally different um you know device. So yeah. Hey, I'm uh Nick Sarif and today I'm going to show you how to get a website

know device. So yeah. Hey, I'm uh Nick Sarif and today I'm going to show you how to get a website up on the internet in like a 45 seconds flat. Kind of neat, huh? So this is more or less going to be the approach that I'm going to use to push all of our apps to production just because, you know,

I don't want us to have to spend a ton of money in order to like actually run server infer and stuff like that. But yeah, in general, like you know, if you're using a predictable library like this,

like that. But yeah, in general, like you know, if you're using a predictable library like this, it's pretty straightforward. Obviously, not every single time is going to go that easily. And I'm

going to show you guys what like more complex app pushes look like. In general, what I do now is I just give my agent um an API key to the service like Netlify. And then I just say, "Hey, you know, push this." And then it'll actually go through and then do all of the work. Um but hopefully

push this." And then it'll actually go through and then do all of the work. Um but hopefully you guys see how easy it is to oneshot a website with Gemini 3.1 Pro. Cool. So that's how to design a website. The issue with websites is websites are really simple. They have no authentication.

a website. The issue with websites is websites are really simple. They have no authentication.

They have pretty cool UX as you can see and you can get progressively more complicated as the models get smarter. Um, but there's no like actual like like security or or data transmission that's really required, right? There's no interactivity. So when we migrate from uh you know websites to apps, what we need to do is we need to understand a couple things about security. And if we don't

understand things about security, what'll end up happening is the same thing that happened to some pretty popular libraries. You guys might be familiar with like OpenClaw pretty recently or a Claudebot is what it was called before its 40th rebrand. And the reason why part of the reason why I rebrand it so much is because there's just so many security problems with it. Like people

had 25,000 API keys leaked. API keys being like basically the equivalent of like a password to a service. That's pretty important. Uh not to mention, you know, API bills that were run up

a service. That's pretty important. Uh not to mention, you know, API bills that were run up because hackers and stuff like that got access to it. Or just like leaked data from users that use a specific thing. Never a good situation to be in. So, I don't want to pretend like I can solve 100% of all security wos for you. I can't. The reality is everything on planet Earth is hackable. It's

just a question of how hackable. And the whole idea of like 8020ing security is just to get your point get to a point where your app is less hackable than the amount of effort that it would require to do it. And so almost like anybody could theoretically break into anybody's house, but we don't because there's just like a little bit more effort is required to like, I don't know,

break my window than just walk into my front door. Um, if you just like do some 8020, I don't know, put a fence in, have some camera outside your front door or something, you'll eliminate the vast majority of like lowhanging fruit. Okay, so I just want to run through the 8020 here. 80%

of security problems in vibecoded apps will come from five things. The first is exposed environment variables and API keys. The second is missing or broken rowle security RLS on your database. The

third is no server side validation which is where you trust the front end for all of the validation steps. So verifying that a password is a password and email is an email. Verifying

validation steps. So verifying that a password is a password and email is an email. Verifying

your logic and your math and stuff like that. The fourth is using outdated or hallucinated packages.

Very important. And the fifth is not having what's called proper authentication middleware. Now again

you don't need to be a computer programmer to get all this stuff. I'm going to explain it while we talk about it. What's really important is when you actually go through and develop, you know, like a like a database for the most part, you just like click the RLS button. Um, when you set up an app, you just tell Gemini 3.1 Pro High or, you know, Claude, hey, you know, I don't want you

to do server side validation. What's important is that you just have it run through all of its packages afterwards or say, hey, do we have proper authentication middleware on every page? You know,

hey, are our environment variables and API keys exposed publicly? And so I guess what I'm trying to get at is it's actually not that difficult to like hit the AD20. You literally just like create one prompt and then you just feed it in as sort of like a postbu workflow similar to what I showed you with the code review initially. So we can just pass all the stuff in as a prompt and I'm going

to do that and give you guys the prompt later and it'll do pretty good. But obviously you know it's not perfect. No security ever is. This should just allow you to launch apps without feeling like a

not perfect. No security ever is. This should just allow you to launch apps without feeling like a fraud or needlessly endangering other people's credentials. So let's chat about the first which is environment variables and then secret management. For those of you guys that don't know, in computer programming, you typically have to deal with the equivalent of a password. And so

we call these passwords various things, tokens, authentication credentials, environment variables, API keys, whatever. But they all sort of like come to the same idea, which is that it is something that if uh a user has access to it, they can typically access a bunch of features of their account and not somebody else's. And so the issue with vibecoded apps is a lot of people with their

agents actually hardcode authentication tokens and secrets and environment variables into their code. And the way that I see it is this is kind of like putting a sticky note with your password on

code. And the way that I see it is this is kind of like putting a sticky note with your password on the front of your monitor like you see in a lot of like older school cubicles where it's like Gmail password 1 23123 Nick is super sexy.com whatever and like anybody that walks by will see that and they will know your password. It's kind of like that with um exposing environment variables and

secrets inside of like a a front end. So, also a lot of hackers will go through the website and app code and then just look for hard-coded mentions of a specific string like next_pub uh you know whatever key or secret key or what and that's a common string prefix. And what I mean by that is like you know if you load up the website that we just had a moment ago which I don't

actually remember the password I don't actually remember the thing. So one sec. Yeah. Yeah. So,

if you go through this website, we can actually like right click, we can press inspect. And uh

as we scroll through, we'll actually be able to like command F different elements on the page. So,

weaponize, for instance, is actually like written in the code of the page. I guess you guys can't see cuz my fat head is in the way. You guys see how down here I just command F weaponize and then we actually found the specific segment. What if we do personalization? Right,

that's there. How about initialize sequence when I'm selecting this element? So what I mean by uh exposing your credentials is basically a lot of the time somewhere on the front end people will write code so that when you click the map growth button up here which we just found down over here um there'll be some additional thing like like I don't know on click equal and I don't even

remember like the actual function definition for this but uh whatever you know fire my API key you know to whatever the website is and then I actually like expose my API key which is right over here and so basically we is we just want to avoid situations where I actually have, you know, on click fire my API key to this location and here it is in plain text. Um,

we also want to avoid the loca uh situation where you have something like next public key equals whatever because if you have either of what I just mentioned, somebody can just go on your website and then do the equivalent of like a command F or control F and just type in like next public key and then they'll find something. It's really dumb, but um you'd be surprised at how many really

like high-profile libraries it's happened. That's one of the issues that I've had with uh well anyway I'm not going to name any specific names but yeah I've had some issues with some some recent vibe coded products because of this. So what do we do instead? Well basically you put them in a file like av and then you just reference them using imports or you tell the model like hey

you know I want you to look in the specific place for all of my API keys and credentials. And so if I show you guys a practical example just using you know anti-gravity basically what you do is somewhere in the core of this you'd go env uh key and then it would look like this and then no like um anthropic private key and then it would look like this right and so basically what you do is

you'd say hey what's my um enthropic key and uh if you ever needed to use it to like construct something the model would instead of looking through your your code base here and finding it like just written directly in a codebase. It would do like a command f through the entire thing. It'd look for something like an enthropic key or something like that and then it would go

thing. It'd look for something like an enthropic key or something like that and then it would go and it would actually find that it's 3 if4 and as you can see it's analyzing the specific file to do so. So this is just like a programming convention. Just keep all your passwords everything like that

so. So this is just like a programming convention. Just keep all your passwords everything like that inside of av. Another benefit is you usually don't push keys to like an a repository on the internet. Normally you just keep that locally on your computer and then you give that to whatever

internet. Normally you just keep that locally on your computer and then you give that to whatever like the app user or whatever to upload their own keys. Pretty simple stuff. Not rocket science. The

issue is just nobody actually does this. Nobody actually asks their agent to make sure that all this stuff is done. The second is this idea of rowle security. So um as you guys are going to see in the next project, we're going to use a database and the database that we're going to use is going to called superbase. It's very very popular with most vibe coder projects right now.

And basically it's like the single most important security feature on planet earth. But um you know these databases out there just don't enable this by default because it's just not something that you know is enabled by default. I don't know. I'm not a super in-depth computer programmer.

but it changes a couple of things and some people don't want to use a database like that. Basically,

what this means is if you don't have this feature enabled called RLS, anybody who has the Superbase URL and then what's called the anon key, which is public by design, can read, write, and delete every single row in your database. And that's just how Superbase works by default. And so

some very popular vibe coded projects here did not have level security. And basically anybody that signed up for them was given a key, sort of like a password, and then they just use that password to search up all of the data about every other person on it. And that led to like a massive massive, you know, issue. Try not to swear in these videos, but it was a cluster. And uh, you know,

that ended up with people's ability to delete rows and databases, which was stupid. All RLS's.

Basically says like, hey, user A can only see user A's data. User B can only see user B's data. Like,

obviously, it's not rocket science. Uh, but if you just turn this on, you'll fix like 90% of errors.

Okay, so 83% of exposed superbased databases involved RLS misconfigurations. uh 83%. That

means like only 17% of exposed superbase issues were not related directly to this one thing that I'm telling you about that is basically just a button. So we're just going to click enable and it'll be fine from now on. But just make sure to know RLS is like the main lowhanging fruit. Next

is something called serverside validation and um a big problem with that is like you know how we just developed a website, right? Well, let's say on their website there was some form and the form was um I don't know it was like a sign up form and it said you know enter your email here and then enter your password and then let's say obviously in order to implement any sort of sign up mechanism

what we kind of have to do is we have to check to see does the email already exists in our database and so what the server side thing what the front end thing would do is it would basically say okay let's match the email to something in our database well um when you do this sort of ser uh front-end validation where you validate like all of the logic on your on your website um it's massive

security risk because as you just saw a moment ago, anybody can jump into the code of any website and then immediately change it. Like I could go to google.com and then I could, you know, um hold command shift C or rightclick and then go inspect element and then I could select anything I want on the page like this Google search button. Then I could actually change it from uh I don't

know this input class which is called Google search and I could change it to nick search.

And now I've just changed Google's website, right? Accordingly, what I could also do is if there's some form here when I put my information in that does my email or whatever, I could actually like have it go through a bunch of email addresses or a bunch of passwords and then it would change the email and password that is being done the valid accordingly. If I had a forum and this forum,

you know, was like checking emails or checking passwords or something, I could actually go through and then I could like see the data, see the function that is actually doing the checking and then I could like look at it and I could be like, wow. So the logic that that guy is using to check if passwords exist is he's checking to see if it's over uh I don't know three characters

and the maximum password length is 10 characters. That means that uh you know I could theoretically enumerate through all passwords between three and 10 characters and then I'd be able to find out anybody's password. You know it's like this just gives attackers way too much information.

Likewise, it also allows them to do things like, you know, if uh a specific email address already exists in the database, what you could do is you could use that same email address, but you could change the request that's being sent. You could sign up a million different email addresses using some script. It's just not very scalable, I would say. Um, and it's not very intelligent to do. So,

some script. It's just not very scalable, I would say. Um, and it's not very intelligent to do. So,

instead, what we do is we actually do server side validation. And what that means is like basically we have our site right over here. And our site in general communicates with some server. And instead

of doing all the validation over here, okay, what we do is we say, "No, what I want to do is basically every time somebody tries to create a new account, I'm not actually going to check on the site. What I'm going to do is I'm going to send a request over to another backend somewhere, some server. The server is going to be much more secure. And then because it's not on the site,

some server. The server is going to be much more secure. And then because it's not on the site, nobody can like jump into the server and then make minor changes to, you know, check out the logic and stuff like that. The only thing that an attacker would actually ever see is just the fact that, oh, the site sent a request to the server. uh but you know the server is like super

password gated and you know requires specific authentication. It's not anything that you know a person could actually use. So that's kind of easy. You just ask your AI model, hey you know make sure to server side validate everything. Hey, is anything here not being serverside validated?

Okay, we'll make it serverside validated. And that takes me to number four, which is dependency and package security. Um so when AI generates code, sometimes it references packages that don't

package security. Um so when AI generates code, sometimes it references packages that don't exist as in your AI will literally just make up a package name. In case you guys didn't know what packages are. Basically inside of most folder most coding uh projects nowadays you have like

packages are. Basically inside of most folder most coding uh projects nowadays you have like a node modules folder or something. And these are all the services that this um repository is using in order to like build my website. And so it's using witch word zod yto q prelude puny code react and so on and so forth. And so as you can see like most websites nowadays are actually like

very very heavily based on pre-existing libraries that other people have built which kind of makes sense cuz like you know the longer the internet's around the more people have built libraries that handle specific features and like obviously you're going to want to just use somebody else's solution rather than build your own wheel and so that's what a lot of people here are doing. Tailwind

CSS for instance is a big design library that just does a lot of the design for you. Arg parse just handles arguments and it's like a simple and easy way to you know do bash scripts and functions.

And so the issue is AI just came up with all this stuff, right? But sometimes it'll actually download or it'll create a name of a module that doesn't actually exist. So for whatever reason, I mean the training data or whatever or just because of the way statistics works, maybe it'll create a folder here or uh whatever called acorns and it'll try and download a library

called Acorns and it turns out the library it wanted to download is actually called Acorn, but instead it tries downloading Acorns. Now, people that have done a lot of stat stats and stuff like that have like done a lot of this to see, you know, what libraries the um AI models typically screw up on. And so, if it sees like, oh, you know, this always says acorns instead of acorn,

what it'll do is it'll actually these attackers will go through and they'll make a big list of all these fake packages. And then they'll actually create packages on the internet that correspond to these. And then these packages will just be malware. So, instead of you downloading Acorn,

to these. And then these packages will just be malware. So, instead of you downloading Acorn, now you're downloading Acorns. instead of it being empty and being nothing because it's fake, now you're downloading somebody's package that actually has like a string in it that says, "Hey, you know, when you download this package, I want you to send all of the API keys to this service."

They as like, "Oh, yeah, that makes sense. I'm downloading this package. This package is legit.

Let's do it." And then it sends all the API keys to the service. So, I mean, like in practice, it's not anywhere near as big of a deal as just like server side validation um issues or RLS, but yeah, I mean, like it can be a problem. Another issue is AI will typically download like older versions and stuff like that if it's not constantly instructed not to which means you might be

pulling in a package with a security vulnerability that you know actually got patched months or years ago. So in general the recommendation is ensure you get the most updated packages as possible

ago. So in general the recommendation is ensure you get the most updated packages as possible as opposed to like you know older ones. And then finally this authentication middleware bit. Um in

case you've ever accessed like an authenticated service before typically the way that it works is you'll have some thing. So I'm just going to open up a new thing and I'll go cloud.ai. Um,

I don't know, slashnew. When I click on this, do you notice how it just immediately jump me back to sluggin? Claw. New is like how you make a new thread, right? Well, there are some apps out there

to sluggin? Claw. New is like how you make a new thread, right? Well, there are some apps out there where you'll pump in like claw.ai/ um I don't know, maybe chat or something like that. Okay.

And then basically you'll be able to act despite the fact that you're not logged in, you'll be able to access chat if you just know that like the URL is chat. Now obviously these guys are a major billion dollar maybe even trillion dollar company by now. So every time I try and access this it immediately jumps you back to login. But this is behavior that is handled by this thing

called authentication middleware where basically when you try and access routes that aren't your routes okay like settings and general and new and and chat u it just knows that okay well you're not actually logged in so I can't show you that. I need to get you back to the login page first.

And so you know poor app design includes people forgetting to put in authentication middleware um and then people have the ability to access pages they shouldn't. And then sometimes it like allows them to manipulate things, rack up API usage uh calls and stuff like that. So you can fix this by just ensuring middleware secures all routes. Okay, so like I didn't want to make this little module

here because it's boring as hell, but just know that you know most people that build vibe coded apps will miss one of these five features and then vibe coding in general just gets a really bad name because people just don't secure their [ __ ] right? The reality is like nothing is 100% secure as I said, but if you just do these five things and then um you know ask your AI models

to fix them, uh you know, it'll do a reasonably good job and I'd say about 80% of your security issues are going to be handled, especially that rowle security thing. So what I've done is I've actually gone through and I've created a massive prompt for all of you guys that you can use right over here. It's called the security audit prompt. You just copy everything below this line,

okay? And what you do is you give it to your model and you say, "Hey, you know, I want you to check

okay? And what you do is you give it to your model and you say, "Hey, you know, I want you to check to see if all of this stuff is done." Then after you're done, um, you know, flag all of your issues and then ask me what you want me to do about all these issues. So, hypothetically, I mean, I'm just

going to paste this whole prompt in, and I just did to our website. Um, the issue with the website is obviously there's no real authentication going on, right? So, it's not like it really matters too much. Uh, but still, you know, it's a reasonable way for us to at least run through this. And now,

much. Uh, but still, you know, it's a reasonable way for us to at least run through this. And now,

uh, Gemini 3.1 Pro High, and I always recommend using the smartest model for this stuff, is now just going to like take this prompt, pump through literally everything, and then just say like, "Hey, this is good. Hey, this is bad. Hey, this is good. Hey, this is bad." And then we're going to secure it by basically just saying, "Okay, fix everything that's bad." Okay. And now it's given

us a big returned checklist. It's saying that the codebase is a classic static front end. Here's

the systematic audit. No hard-coded secrets, no API keys, and so on and so forth. No git ignore, which is something that they typically recommend to um prevent you pushing yourv, no console log statements, you know, a bunch of things. And it looks like, you know, we didn't actually have any to go off of for most of this. If you scroll all the way down, it'll actually show you like

here's the big checklist summary. Uh because this isn't an app with any authentication, right? So,

it's just like a website. And so, because of that, only these checklist features are the only things that are relevant. But we did fail two. So, I'm going to say is fix the two that failed. And then

uh it's just going to go through. It's going to add the git ignore. It's going to add a couple other things. You know, this takes time, right? I mean, it it's going to take me some token costs

other things. You know, this takes time, right? I mean, it it's going to take me some token costs as well. I'm going to spend some money on this essentially. So, unsurprisingly, people don't want

as well. I'm going to spend some money on this essentially. So, unsurprisingly, people don't want to do this and uh that people typically forget it. But, you know, this is an 8020 pass. It's

not going to fix everything, but it's going to fix the low hanging fruit, which is to be honest what most people really just care about. When you vibe code an app and you publish it and then it starts scaling and you start making some money from it obviously then you can take some of that money use it to hire maybe an actual security engineer and have them audit your project and stuff like that.

Okay. And here you go. It did. So it updated this to add the get ignore and then it updated this to um update eslint and resolve all four high high severity mini match vulnerabilities which is cool. So yeah, looks like we are now solid. Let's move on to something a little more interesting,

cool. So yeah, looks like we are now solid. Let's move on to something a little more interesting, which is taking everything that we now know about how to build a beautiful front end and then how to do security audits and stuff like that and then combine it into a full stack app. So,

next up, we're going to build a fullyfledged SAS app. The app that I want to build today is a client dashboard platform for a hypothetical content writing company. And so, like any typical client dashboard, we're going to want to be able to create orders, um, view pending orders. We're

going to want to have like a nice sexy dashboard which gives us an overview of everything, our stats and so on and so forth. Then we're also going to want some sort of like settings or configuration page. Then on top of that, we're going to need some sort of login naturally. And

then I think at the very end, I'm also going to produce a nice sexy landing page just to tie it all together. And then I'm going to push it uh live to production as well, just so you guys could

all together. And then I'm going to push it uh live to production as well, just so you guys could see how it all interacts. Before we actually do the building, I just want to run you guys through what I consider to be the uh basically major vibe coding design loop as of right now. And obviously

there's a bunch of different ways to build apps. And I don't want you guys to think this is like the the end- all beall. There are many many different ways to do this. But in my experience, this is like one of the one of the good ones right now. And if you follow this sort of flow, um you'll save yourself a fair amount of time later on just in terms of like the design and

then also security because um as I talked about in the security module, there's a fair amount that goes into designing like a wellsecured app. So the way that this works in general is we start with some sort of inspiration design. And so there are a variety of different places you can go to for these inspiration designs, but in general, I like going to um this website here,

Dribble with threebs. I like going to this one called godly uh website. And basically,

there are a bunch of these sources on the internet that compile really high quality designs. And like

logically speaking, I'm not a designer, right? I haven't spent all the time and energy necessary to know the right padding and the right color schemes and all that stuff. So it's like, why would I worry about coming up with all that stuff myself? instead I could just borrow somebody else's and then we can make some changes to it and then once it's all changed and and and all

nice and pretty. Um you know like we will have taken the design fundamentals that somebody spent a lifetime putting together and then we could just work off of that instead of spending god knows how long trying to figure out like the total amount of margin on the left and the right hand side of the uh the elements. It's crazy stuff. So as somebody that's like been doing a fair amount of design,

I got paid for design. Uh it's not worth the time and energy that it goes into learning all that stuff. So we start with an inspiration design. I'm going to grab a couple of these. And then you have

stuff. So we start with an inspiration design. I'm going to grab a couple of these. And then you have an optional step here which a lot of people are starting to do now where you animate. So the idea is since Vibe coding now makes uh the ability to like replicate designs and have high-end designs really really easy. You know you need a way to stand out. And so the way that people

are standing out now is through animations through um like kind of videos that are playing. The idea

being that you know a still can't make video based stuff super super high quality. So you could still um stand out as like human created content or uh designs with something like that. I'm going

to show you guys how to do that. Anyway, uh this does cost a little bit of money because there's some models out there that you need that can convert images to videos, but I'll I'll run you guys through what that looks like um for the landing page. After that,

we need to build in the main functionality, which is always going to be the dashboard. It's going to be things like, you know, your various widgets, your various pages, and stuff like that. Then,

we're going to do local testing and iteration. Local testing, just so we're all clear, just means testing it on your device, and it also means testing it with uh without a database. So,

we're just going to do all the file and then, you know, uh, data and stuff like that in like a JSON and then we'll just test it all locally, make sure that it works. Once we've made sure that it works, we'll then push our data to a database. And then, in our case, we're going to use superbase. I'll

talk about that in a sec. But then, um, we'll test it all basically with the database. Once

we're done with that, then and finally then do we create an authentication page. And I find um, doing O at the end is way better than doing O at the beginning because if you guys remember, I mentioned like middleware, right? Well, like a big issue with the middleware is you'll just like the low hanging fruit is you'll do the O first, then you'll make the pages and then the

O will only secure the first page that you do. So instead, we're just going to do our O at the end and then the model will already have all the context to like produce um you know good authentication middleware for all the pages and then at the very very end we're going to deploy and then obviously the issue with you know testing back here when it's sort of on your machine and

then deploying is like you you need to test it again. So we're going to do some end toend tests.

We're going to do some miscellaneous designs and I'll probably just throw in the landing page there since obviously the landing page doesn't really have much functionality to speak of. And uh yeah, that's that's more or less the loop. And then you know like when you're ready what you do is you just do the exact same thing. You just make a new product and then you start with

the inspiration design. Um you can do some video animations if necessary main functionality local testing database testing off deployment and end tests and then landing page. Then my inspiration design animate and so on and so on and so on and so forth. So I do this on basically all my vibe coded apps and uh yeah works pretty well. So the common vibe coding stack which I'm just

calling the usual suspects here are going to be a combination of Nex.js for the front end a superbase for the database and the off and then some sort of serverless backend which um in our case is going to be netifi but you can use netlifi versell and a bunch of these other tools but this is just what people mostly use because it's just very easy to spin up. So,

to make a long story short, in case you know, we have people here that aren't familiar with the idea. Um, you know, when you sign onto a website, obviously this is my really crappy rectangle. Um,

idea. Um, you know, when you sign onto a website, obviously this is my really crappy rectangle. Um,

and this is our browser with the three little dots, maybe the URL bar and stuff like that. And

you have like the app over here and I don't know, some sidebar. And then here's some other stuff, you know, like what what you're seeing, what's rendered here is is the front end. And um there's already different front-end languages, right? I mean, like HTML is hypertext markup language. It's

usually used to create the structure of the page. If you have CSS, which is cascading stylesheets, that's usually used to like make the the rendered elements really pretty. And then,

you know, if you want functionality on top of that, you will use JavaScript and, you know, TypeScript. And there's there's all these different languages, right? Well, basically

TypeScript. And there's there's all these different languages, right? Well, basically

what happens is um using all these languages, there's just so many different ways you could use them that all the developers were using them slightly differently. Some were more efficient, some were less efficient. What people ended up doing is they created uh front-end frameworks.

Okay. Well, not even just a front-end framework. NexJS is technically also like it's like a full stack framework but um they made frameworks which just encapsulate all three of these into you know this thing next.js and so what this is this is basically like a full way to manage your HTML CSS your JavaScript all these other programming languages and then builds they build it in a

very opinionated way that consistently produces similar outcomes and you know follows a consistent and predictable pattern so that most developers can just spin up a site really quick. This is

doubly important in the age of AI where you know when if things aren't standardized there's like a million billion different ways that an AI model could make a site and because usually there's a lot less supervision when you're viing than um you know like a traditional development process. A lot

of these ways just like aren't really well thought out. You know AI just picked the simplest lowest hanging fruit and went with it. So I recommend using these frameworks and stuff like that just both to economize your work but also just to make sites predictable. If you ever hand them off to anybody if you're doing these for clients and stuff like that you know next.js is the way

to go. Okay. So that's the front end. Um you know Superbase is going to be our database. So, I mean,

to go. Okay. So that's the front end. Um you know Superbase is going to be our database. So, I mean, just think of it as like a big Google sheet with like a bunch of different tables and columns. Wow,

my drawing skills have gotten worse recently. Uh, but to make a long story short, you know, the stuff that is visualized on our front end, like our bar charts and our little widget apps and stuff like that. Obviously, we need to pull the data from somewhere, right? So, it doesn't make sense to keep all the data like on the site cuz it's always changing. What we do is we're going

to pull from a database and then like use that to actually go and and change features. Obviously,

we're going to need a login screen, right, with like a little user uh portal and then like a little password portal. Um, let's round that off so it quits looking phallic. And uh,

Superbase is going to help us with that as well. And then finally, you need what's like called a backend, which is basically just like a server. And this server is actually going to manage the interactions between our database, our front end, our off, and and you know, a lot of stuff. So, you

know, that's a little bit more cloud-based. You're not really going to fully I can't really just draw something that makes sense there. But suffice to say, all these four components are going to interact together really nicely. And then the stack that basically all the tools use is Nex.js, JS superbase and then some sort of what's called serverless um back end. Okay, so we could go

into that or we could just build it and I'd much rather just build it and then you guys could learn through the doing. So let's start with the very first step which is finding an inspiration design and I'm going to immediately jump on dribble for that. So dribble for those of you guys that don't know but just go on the website. It's basically just a big list of like different designs that

people have made and it's cool. It was it was initially meant to be like a way for designers to create a portfolio and show off the work and stuff like that, which is pretty neat. Now, you know, to be honest, I think a lot of people are just using this to source AI designs. I don't know how much longer we're all going to have access to dribble, but uh we'll see. And, you know, in our case,

what we're looking for is we're looking for some sort of like client dashboard, right? So, I'm just going to type client dashboard in here. Basically, what you'll see is a bunch of people have created these really sexy client dashboards. So, I'm just going to click on a couple of these. Um,

yeah. So, I I already opened that one. So, let's click on this. Let's click on that. This one's

actually pretty nice. And then, hm, why don't I open up? No, I don't really like that one. That

one looks kind of dumb. This one here looks cool. Okay. And as you can see, you know, I now have um like a list of, in this case, all clients on the lefth hand side. You know, this sort of like nice gray pattern, and that's that's kind of cool. I don't really like this one a ton, though. So,

I'm just going to keep looking until I find one that I really really like. Um, what you'll find is a lot of these are now videos as well. And there are a couple reasons why they're doing videos. One

of them is that they don't really like when people screenshot them like I'm about to. That design's

cool. Okay, this is reasonable. Um, this one's pretty interesting. But the one that I initially picked that I just liked the look of was this here, which is super simple and it's very like extensible and you guys can add on whatever the heck you want, right? So, I think I'm going to use this. And uh, basically what we're going to do is I'm going to create a screenshot of this

use this. And uh, basically what we're going to do is I'm going to create a screenshot of this and then I'm going to use the model to try and replicate this as closely as humanly possible.

And I have a prompt set up that I'm going to I'm going to send it to and stuff like that. And then

from this we're going to get like a really high quality design. And then I think I'm also going to do the same thing for the landing page. Um you know this design is different from this design but uh you know I'm just going to find a way to like meld the two together. And then I think at the end we're going to have something that like has the color scheme of this but it actually has like

the design of this if that makes sense which is ultimately what I'm going for. I like that design.

I like this um I guess this is sans ser but I really like this font. So yeah let's uh let's give it a go. So what I'm going to do first is I'm gonna head over to anti-gravity. Okay.

And then I'm going to open up a new folder. And I'm just going to call this full actually let's go lowercase full stack client dashboard. That's going to be my very uh first full stack app with you guys. And then what I'm going to do first is I'm going to talk a little bit about the different

you guys. And then what I'm going to do first is I'm going to talk a little bit about the different types of models that we have available to us. Remember how before we designed our landing page entirely using Gemini? Gemini 3.0 Pro is awesome, but personally I find that actual like system plans and system designs are better done through Opus 4.6 right now. So, what I'm actually going to

do is I'm actually going to do the planning in Opus 4.6. I'll show you how to do that. First,

let me zoom in because this is pretty far out. And then I'm just going to go to um plan mode here. If

you just keep on cycling through, eventually it'll get to it. It's the one with the little pause sign. And then I uh created a prompt here that I just want to go through with you guys. So,

pause sign. And then I uh created a prompt here that I just want to go through with you guys. So,

the prompt says, "You're a world-class website designer with 15 years of experience designing high quality, award-winning websites for Apple and Dribble. We'd like to build a full stack SAS client dashboard app for our content writing business. It's very important that you get this right. our career depends on it. This is a little hack that I picked up from um I think it was like

right. our career depends on it. This is a little hack that I picked up from um I think it was like a former OpenAI dev or something, but they found that when uh you make it really really important, like our career depends on it, the output quality actually goes up just by a few percentage points, nothing major. And my prompt is not winning any awards here. So, uh anyway, I'll take every win

nothing major. And my prompt is not winning any awards here. So, uh anyway, I'll take every win that I can get. As a client, we want the ability to view all pending content orders and progress in a beautiful dashboard. We also want the ability to create new content orders using a highquality but simple form. Let me just run this. We want the ability to configure various settings,

modes, etc. And we also want anything else. Your usual SAS app like this would include the dashboard. SAS app should use superb. I said superbase here. What I meant to say was superbase,

the dashboard. SAS app should use superb. I said superbase here. What I meant to say was superbase, but I was using a voice dictation. So, what are you going to do? Next.js and then tailwind.css.

And we will deploy using netlifi. I'll define the UX via screenshots. So, don't worry about design particulars. The flow will be first we'll build the main functionality, which are the parts I

particulars. The flow will be first we'll build the main functionality, which are the parts I talked about above using a screenshot inspiration. You'll take the design style from the screenshot and then use it to build all of the signed in pages. Then we'll make it interactive with local data and ensure routes work. Then we'll add O and DB with superbase. Then we'll make a landing page

and finally do an endto-end sweep to ensure everything works including off, middleware, security, testing, etc. Then deploy and retest. Then I'm saying think extremely hard and generate a great plan. Once you've developed one that is comprehensive, report back here and I'll supply some screenshots. That's how we can start the design process. Okay, so I gave it a fair amount

some screenshots. That's how we can start the design process. Okay, so I gave it a fair amount of context and you can see it's already done some thinking, right? put the text stack and looks like it corrected my little issue there with superbase phased approach right they want me to plan this out comprehensively there's nothing in the current um working directory so it looked it couldn't find

anything green field project and now it's actually going to go and create the architecture and that's what's that's what it's doing right now that's why it's in plan mode now I should note here in the bottom right hand corner you guys probably I don't know if you guys could see that's pretty small we got this little lightning um what I've done is I've enabled this thing called fast mode just

because Opus 46 supports it and that allows it to go two and a half times is faster approximately for I think like 3x the price. So little bit of an arbitrage there. Um I think the price is going to jump up to 6x pretty soon. So it may not be available when you guys are on it. But personally

I find for building really comprehensive plans awesome tool and an awesome model. Okay. And

then uh basically what I wanted to do is I wanted to like produce this big plan and then I'm going to pass off this giant plan over to Gemini who I think is actually just a better designer. Okay. So

once the uh thing is super comprehensively planned um then I can just pass all this stuff to Gemini with the screenshots. But sometimes claude code will actually ask you or rather Opus 4.6 will use cloud code to ask you questions and so that's why I'm doing all this planning and stuff like that here just in case it asks me some questions for clarification. Okay. So I'm going to press

escape because uh it's basically like hey do you want me to start? Then here it's going all the way to the top here. We want to build a full stack SAS dashboard. Here's the tech step. Here's the

phase one project setup in UI shell. And um I'll be honest, like I'm I'm usually not reading this entire thing. What I'm doing is I'm skimming. I'm just making sure there's nothing that just

entire thing. What I'm doing is I'm skimming. I'm just making sure there's nothing that just jumps out to me as stupid. Like what I want is I basically just want to see, hey, are there way too many pages? Is this way too complicated? Is this model completely misunderstood what I want it to

many pages? Is this way too complicated? Is this model completely misunderstood what I want it to do? And so what I'm seeing is there'll be like an app page, there'll be um a dashboard page,

do? And so what I'm seeing is there'll be like an app page, there'll be um a dashboard page, orders, a new page, a settings page, notifications page, and that looks pretty reasonable, right?

There'll be a components page where it'll actually store all the components. Library page. Okay,

this looks pretty good. This looks pretty good. Interactive local data. So after that, we'll define some types. Yeah, I don't even know what the hell that really means to be honest, but that's okay. And then we have those actual pages, which look good to me. All of these are pages

that's okay. And then we have those actual pages, which look good to me. All of these are pages that I would realistically want my app to have. Is there anything else I'd want? H dashboard orders.

No, I think I think this is fine. After that, we have the superbase off. So here, I'll like set up the superbase, but that's okay. That's not for now. That's later. We'll finally have the landing page which is going to be really nice and sexy and then we'll have some key architecture decisions.

Okay, cool. I mean, this seems pretty reasonable to me. I don't think there are any problems here whatsoever. So, what I'm going to do is I'm actually just going to copy this whole plan. Okay,

here whatsoever. So, what I'm going to do is I'm actually just going to copy this whole plan. Okay,

this whole thing that this just created for me. I'm going to paste it into this now. Okay. And

then I'm also going to provide some initial screenshots of what I want the dashboard to look like. So, I'm just going to command um you know on a Mac you can command shift control. So,

look like. So, I'm just going to command um you know on a Mac you can command shift control. So,

command shift control 4 and then I'm just going to go select this. Okay. And that'll actually give me like a pretty high quality screenshot. I'm going to feed this in. Okay. And so now we have the image of the dashboard and then I'll say design using this style as inspiration clean and

minimal. Okay. Okay. So, what I've done is I've now split the work up between these two agents.

minimal. Okay. Okay. So, what I've done is I've now split the work up between these two agents.

I had um Claude Opus 4.6 design me the really comprehensive plan because as I mentioned I think it's a little bit better at planning at least as of the time of this recording.

Then I'm going to hand off all of like the design and then you know basically just like grunt work over to Gemini 3.1 Pro High, which I think is way better at actually like wiring up the components and then putting together like that that really high class design. And uh you know at this point all we really have to do is just wait for it to build. And this is realistically because it is,

you know, going to be a pretty comprehensive app. This isn't something that's going to happen in a couple minutes. You're probably gonna be good to like go step away, have a coffee, come back. By

couple minutes. You're probably gonna be good to like go step away, have a coffee, come back. By

the time all that stuff's ready, this will have given you some sort of result. But it's always good before you do that just to like wait for, I don't know, 30 seconds or so because sometimes it'll give you a plan and then you can just review the plan um and just double and triple check that it didn't do something super stupid or super terrible. And I don't think it has. Everything

here looks good to me. So, I think it can just go ahead and commence the project. Cool. So,

I'm actually going to go grab a coffee and I'll be right back. Okay. So, now it's telling me it's now completed phase 2 interactive with local data. So, we should now have a site up and running with some sort of local data. Immediately after I said let's open it. So, it's opened it. I tried doing some initial debugging and stuff like that on its own. It it didn't end up doing so because there was an

additional error which I'm going to talk about. And just on the uh I guess concept of errors when you create a full-fledged SAS app like one that has like back and forth and stuff like that, not just a website where there's no interactivity, you know, you're going to have errors. And so it's not about like will I screw up at some point. Will the model get this wrong? Just a matter

of when and then what you're going to do when uh it screws up. So basically what I've done is it started the development server and opened this in my local browser. So I just click this open and as you can see here we have the app set up, but the app looks a little funky. We don't have any styles. Just looks like crap. So obviously this isn't what we want, right? What I'm going to do

styles. Just looks like crap. So obviously this isn't what we want, right? What I'm going to do instead is I'm just going to take a photo of this and then I'm just going to send it back. And then

I'm going say I don't think styles are loading also because I'm pretty sure there was some issue, right? I initially got this problem as well where it said missing HTML and body tags in the root

right? I initially got this problem as well where it said missing HTML and body tags in the root layout. So I'm also going to copy this in. Also, I got this error. I'm going to paste that in. So,

layout. So I'm also going to copy this in. Also, I got this error. I'm going to paste that in. So,

you know, at least initially before you even get to be able to play around with the UX, you may have some like initialization problems and config problems and stuff like that. And that's

okay. Basically, what you do, um, if I just show you guys sort of how I think about vibe coding these things is it's almost like I don't know, you're in a cave. Uh, have you guys seen like the, you know, mining meme where you're like mining for gold? Okay, basically you're in a cave and every single time you run the thing, you're like this fella here. You just get a little bit further

and a little bit further and a little bit further and you know this fell here can't see anything.

It's just darkness in front of him, right? So every time he mines, he goes home and he's like, "My god, I didn't make any progress today." But obviously if he just continues going, eventually he gets to the point where there's a bunch of gems sort of on the other side. And so that's basically what we're doing. We're just going to work through this initial sludge with initialization errors by

copying and pasting um any problems and then just giving it directly to uh the model until we get to that little gold gem. Once we're here, we can actually start making real changes to our app. Um,

and all of that is reasonably well expected. Okay, speaking of which, it just modified some of the CSS after I sent it this message. And as you can see, we now have a little dashboard set up, one on the left hand side. So, we've already made some some reasonable progress. I'm just going to dashboard, see if there are any issues. Okay, I'm not seeing any issues at all. So, we have five

total orders, one in progress, two completed. This is just some fake data made up. So,

you can see we can now mouse over each of these three things or uh five things. SAS growth guide, Q3 newsletter, so on and so forth. So, these are all the orders that we have submitted as clients.

There's a little notification toggle. Um, if I click on the orders page, we're now here. So,

you can actually see the orders better. I'm just curious if I click new order, what happens? Okay,

so we're now on a new order page where I can actually add info. So, I'm going to say this is an example. New order, content type, landing page. Hey, I want to build a really cool, sleek, sexy landing page. And then, you know, I want some stuff here. And then here's my requested deadline.

I don't know. We'll say March the 1st. We want to add SEO meta tags and then require approval.

I'll click save order. Okay, cool. And it looks like it's got the functionality. And so I can now actually add orders. If I go to settings, what do we got? Demo user, Acme Corp, email address, cool preferences, email notice, weekly digest. Okay, so these aren't working. At least the weekly digest isn't. But that might be intentional just because we don't have um access to, you know,

some sort of email. But yeah, I mean like to be honest, like the the core functionality of the app's already made. So although the design is still pretty shitty, I would say and obviously I'm going to want to fix that up. Um core functionality is done. We basically have like I want to say a REST API, but we have like a little CRUD app here. We can create, we can read.

Um I don't actually know if we can update. Doesn't look like we can go to the specific order page to update yet. So maybe I'll make a note of that. Um but we can presumably also Oh no, I don't think we

update yet. So maybe I'll make a note of that. Um but we can presumably also Oh no, I don't think we can delete either. Okay, cool. Anyway, this notice page also has notice. That's kind of neat. Um,

I think what I'm going to do now is I'm just going to voice dump in all of the problems that I see.

And then we're just going to go back and forth until we can eliminate just the minor little errors like styles and stuff. And then once we've tested and confirmed the functionality here, then I'm going to do a big stylistic upgrade. After we've done the stylistic upgrade, I will uh then make this database friendly. And then once it's on the database, then we can actually push. Hey,

this is really well done. Nice job. When I click on a new page, there's initially some there's a there's a brief initial load where it says loading orders or loading settings or a loading dashboard.

I'd like you to remove that. I don't want any sort of loading um widget here because it just makes it look lower value. Instead, I want you to maintain the structure of the page and just leave all of the various sections blank. So, for instance, if I were to click on orders, rather than it say loading orders before it populates the rest of the page, uh where it shows me the table and stuff,

I just want you to present the table to me immediately and then just leave it blank. That

way, we could fill in the text um afterwards. Um right now the navigation text is in light gray.

I'll take a screenshot and I'll show you what I mean. But on the orders page, for instance, um the text that says orders at the top lefthand corner is very similar to the background color.

So that's annoying. I'd like some sort of graph on the main dashboard page cuz right now I don't have any. I'd like a way on the dashboard page to click into the recent orders as well. Uh

have any. I'd like a way on the dashboard page to click into the recent orders as well. Uh

right now I am capable of mousing over them and something changes, but it's just a style effect.

I actually want the ability to click on them. In addition to being able to create, I also want to um be able to click on each individual article on the orders page and then view it. Right now,

when I click view, it says either order not found or it takes me to some error page, which is not what I want. The notifications page has a mark all red button that is currently grayed out. When I

click on the notifications at the top right hand corner, that little icon, nothing happens. So,

I'd like that to just take me to the notifications page. There's also nothing that happens when I click on my little profile picture in the top right hand corner. Under settings, when I toggle weekly digest, nothing happens. Email notifications works, but the weekly digest toggle doesn't. There's a nextjs error here called param property was accessed directly with params.id.

doesn't. There's a nextjs error here called param property was accessed directly with params.id.

Params is a promise and must be unwrapped with react use before accessing its own properties.

Nothing happens when I click on the little demo user button in the bottom lefthand corner either.

This is quite a promising start. We just have a few adjustments that we have to make. Uh so

that functionality is perfect. Once you're done with that, let me know and then we can proceed.

Cool. So I've just added all this context and I'm just going to take a screenshot now of that issue that I talked about where the orders text was um you know kind of gray. That'll

provide some more context. I'm keeping this small intentionally because every new pixel is like more tokens than I'm consuming, right? There's some other minor stylistic changes and stuff, but for now I'm not going to worry about the style. And the another reason why is because um once you have an app that's like up and running like where all the functionality is right then you

can just like open a new Gemini instance and not have any context and then just say like hey here's my app I just want you to change a design and then it can just go into the style sheets and stuff like that make it really sexy. Uh whereas if you try and mix all of this stuff into one big long

context window sometimes it can get messed up. So you know I just want this specific chat right now to focus on the main functionality and then we can worry about the design afterwards. Anyway,

let me just make sure I didn't add in any additional information. Cool. Cool. That looks

good. Grade out. Okay. Why don't I do this? There you go. Cool. So, now deliver that information.

And just like um last time, uh I'm just going to sit tight and wait for it to relaunch. Okay. It's

telling me that it's now updated everything. I'm just going to click accept all. And then

we'll go back to the specific page. Let me click on settings. Cool. We don't have any issues there.

Um everything there looks fine. Oh, you know, I think there's one thing I forgot to point out, which is this um notifications button. I think that's going to be okay because we're probably just going to massively change the style here. But yeah, that looks fine. Let's actually click on a specific order. Nice. This is now pushed all the way to the left. The order um arrow looks really

specific order. Nice. This is now pushed all the way to the left. The order um arrow looks really nice. I don't know if there's a way for us to uh mark this as completed now, right? Okay,

nice. I don't know if there's a way for us to uh mark this as completed now, right? Okay,

cool. It also says start work. That seems kind of odd. I wonder why it says start work. Um yeah, I'm noticing that as well. So, I think we're probably going to have to remove that. The model might like fundamentally misunderstand what I want. What I basically want is I just want the client to have like a dashboard where they could see it all. Hey, I'm noticing there's like a start work button. Um,

just to be clear, this is a dashboard for a client to look at the work that is currently being done by the agency. So, they don't have the ability to start work or anything like that. Just go

through and fix this. So, if there are any other idiosyncrasies, um, those are taken care of. Okay,

cool. We got that last change here. And it looks like everything is now super clean. Um, no major issues whatsoever. If I click on this button, uh, we only have readon access. Essentially,

issues whatsoever. If I click on this button, uh, we only have readon access. Essentially,

clients can't make any changes. they can only download stuff and the HC is what initiates that.

So that's what I wanted. From now on, what we're going to do, rather from here on, what we're going to do is we're going to redesign this because I think the design is kind of elementary at the moment. And I'm going to use that same approach that we talked about earlier. We're going to find

moment. And I'm going to use that same approach that we talked about earlier. We're going to find a really high quality pre-existing design and I'm going to have Gem and I basically go through and then modify this to match. Um, and the idea is it should be able to modify this to basically be like almost pixel perfect. Uh, we're just going to like change the fonts and stuff like that. Okay. So,

I'm going to go through dribble again. And I mean, I like this idea of like a light mode dashboard.

Uh, I really do. Uh, what we had before is kind of mid. So, I don't want that. I do like the idea of like something dark on the left hand side, though. Kind of break it up a bit. So, I'm going to see if I could find something that is dark. Let's take a quick peek at this one. This one looks all right.

You know, I really, really like this one. This one looks super clean. Check that out. Okay. So,

I'm a big fan of this. Super big fan of that. I think what I'm going to do now is I'm going to take this screenshot. Okay, copy that in. And then I'm going go back to Gemini. I'm going to paste it and I'll say, "Hey, this is great. I'd now like to change the design significantly. You should

do the vast majority of your work in Tailwind or whatever stylesheets that you're currently using to build this." Um, in short, I think the design right now is very basic and super simple.

I want you to add significantly more complexity um using things like cool mouseover effects on navbar elements on the lefth hand side. I want you to add really highquality icons. I'd like you to modernize the design significantly. I want you to try different fonts,

icons. I'd like you to modernize the design significantly. I want you to try different fonts, higher quality fonts. I want you to use like cutting edge um new ones that are on Google fonts, etc. I want you to use some placeholder images so that the design feels alive. And I also want you to significantly upgrade the graph. What I've done is I've given you a screenshot from a similar

design that I like a lot and I want you to mimic more or less everything that you see here just as a uh just as a start point. I'll modify the design slightly afterwards, but try and really nail the font colors. Uh try and mimic the font styles. Try and mimic the um encapsulation, the border styles,

font colors. Uh try and mimic the font styles. Try and mimic the um encapsulation, the border styles, cards, etc. Okay, this is looking a lot cleaner. I'm loving how it did this design. You also see way higher bar charts, way cooler bar charts. Um, this takes me to what looks like a mini landing page that I put together. That's interesting. I wasn't even like looking for a landing page,

but it's nice that it did. So, and we even have like a little look at that. It's like a little notion um avatar up top. Cool. Um, my tasks are still the same. When I click this button, you see we do have that higher quality design, which is nice. And nothing pops up for calendar.

Nothing pops up for reports. Nothing pops up for portfolio. Nothing pops up for these buttons.

Neither does it pop up for those buttons. Let me just check the bottom. Okay. And then yeah, the settings work. So, basically, it's just populated this with a bunch of additional buttons that we

settings work. So, basically, it's just populated this with a bunch of additional buttons that we don't need. I'm just going to tell it to remove all the stuff that we don't need. And then I'm

don't need. I'm just going to tell it to remove all the stuff that we don't need. And then I'm also going to have it adjust the font a little bit cuz I think the font's the same. Hey, this looks much better. Fonts are the same though. So, I want you to adjust the fonts. Um, I'd also like you to

much better. Fonts are the same though. So, I want you to adjust the fonts. Um, I'd also like you to change all of the major titles from title case to sentence case. For instance, task completion over time should be sentence case. Apply this to all other elements and boxes. I'm liking the design

quite a bit. Nice job on the avatars. I think you should add borders rather than shadows around things to better match the task beto design. I'm also noticing that you put a bunch of additional buttons that we don't need. Like for instance, calendar, reports, portfolio, product management, project management, real estate website, my first portfolio, all team product team, invite team,

supports, that little thumbtack icon, the play icon, the integrate icon. These aren't things that we actually need because there's no pages that will address them and I don't plan on making them. So, I'd like you to remove all elements for whom we don't have pages because that's

them. So, I'd like you to remove all elements for whom we don't have pages because that's not really relevant. um make the search bar apply to our current list of orders and then update the design of the settings page because right now it looks the same as it did before. And then finally

in inbox the button that says mark all as red is um almost completely transparent. It's very

difficult to see unless you mouse over it. So fix that as well. I think that's more or less the last round of edits and then we can get into publishing this. Cool. And this is the final result. I have

a very clean dashboard. You see with that scroll on the right hand side, we don't have any issues.

Down at the bottom, we have only the pages that are actually relevant to us. Now, of course, I could add like a million pages here if I wanted to, but I don't really. I mean, like this is just the purpose of the app, right? I think in our uh crazy vibe coded economy, you're going to find that like a lot of apps are going to have unnecessary features and whatnot just because they

can. I think simplicity is actually going to end up being quite the moat. So, yeah, I'm going to

can. I think simplicity is actually going to end up being quite the moat. So, yeah, I'm going to keep things as simple as humanly possible. Uh but yeah, everything works, which is really nice. So,

you know, if I click on this app, uh, sorry, if I click on this specific content page, you know, you can see that I'm I'm here. Content's being written and stuff like that. I don't have the ability to modify like I had last time, you know, I can download stuff if necessary. If I go back to the dashboard, this um graph is interactive. Uh, you know, and I I can jump into this anywhere I

want, which is kind of neat. And then down at the very bottom, which you guys can't see cuz my fat head's in the way, I have the settings page, which is pretty neat. Um, and then, yeah, we also have the ability to search tasks up here, which is really, really cool. Um, I could type SAS growth guide and then that's an initial piece an additional piece of functionality that was added.

Okay, so I'm just going to clear that notif. And now that we've like really basically built this whole app directly on the computer, it's time to take this to the cloud. So, what I'm going to do next is I'm going to go to anti-gravity and just before we proceed with our next step, I'm going to ask it to save everything that it's done so far into a gemini.mmd that effectively encapsulates

what this app is, everything we've done so far, and then provides instructions for future models in case we need to pass this off. And the reason why I do this is because you might actually run out of like context. Um, that happens pretty often. For those of you guys that don't know, there's only a certain number of tokens that you can actually fit into one conversation with an AI

model these days. Whether it's like Opus 4.6 six with a 200,000 context window. They have

a 1 million context window option as well. Whether it's, you know, Gemini 3.1 Pro high, I think I think it has a 200k context window, might have a million. The point I'm making is like a lot of that context just used up by the internal thinking of the model as it does tasks, right? So, in my case, like I I just don't want to risk it. I don't want to like get the thing to the

right? So, in my case, like I I just don't want to risk it. I don't want to like get the thing to the point where it's gone a little too far and then it barely remembers what we talked about initially.

Instead, what I want to do is I basically want to like have this almost like a backup of where we are right now. This gemini.mmd file which uh you know in my case is just a very highle summary that talks about where we currently are in the process and you know what we need to do and stuff like

that and then also gives instructions for you know where to go from here. So once we're done with all this and now we have this which is sort of like my fallback what we can do is we can um move on with the next step. So I'm going to say fantastic the current design looks great. What I want to do next

is I want to ensure that it works not only locally but with Superbase as our database. Walk me

through everything I need to do. In case you guys didn't know, Superbase being our database. Um,

this isn't something the model can actually set up entirely for us. Instead, what we're going to do is I'm just going to ask it to walk me through. And that's what it's done. Create a new Superbase project up here. Set up the Superbase client and so on and so forth. Create the database schema. Enforce RLS. That's really important like we talked about. Then replace hooks. and

schema. Enforce RLS. That's really important like we talked about. Then replace hooks. and

we're actually going to have it do some of this stuff, but we'll start with database.new. So, I'm

just going to jump over there. It'll now ask us to create a new project. Now, in my case, I'm already signed into Superbase. So, I can just click that button and then boom, it's done, right? They own

the freaking domain name database.new. They got a lot of this, right? And they've streamlined the setup to match. But, uh, if you don't already have a Superbase account, just open up an incognito window and then just go to superbase.com and then just click start your project in the top rightand corner and then just enter your information down over here. email, password, you can continue

with GitHub, SSO, whatever, and just make an account. They're fantastic. This is like a really, really solid app, and uh it simplified the development of like vibecoded sites 100x over. So,

once you're done with that sign up, um you'll be at a page like looks like this. I'm just going to type I don't know, Nikki Poof. I really got to get more mature names for these. Uh okay, why don't we do I don't know. We'll just do client dashboard app. Next up, we need a database password. So,

I'm actually just going to make like a my own fake one and then I'm going to copy it over. Actually,

maybe we'll just generate one. The generated one's weaker. So, I'm just going to copy that.

We'll enable the data API. This stuff looks good. Then I'll click create a new project. Okay. So,

we have our database passwords right here. So, just so that I don't lose this, I'm actually going to give it the password right here. And then I'm just going to have some additional other lines. So, boom. It's now created the um thing for me. And then I think what I do next

other lines. So, boom. It's now created the um thing for me. And then I think what I do next is I have to go to project settings. There's a project ID over here. So I'm going to copy this over and then I'll go project ID. Paste that in. And then I need the superbase superbase URL as well. So I don't actually know exactly what that URL is, but I'm just going to copy the dashboard

well. So I don't actually know exactly what that URL is, but I'm just going to copy the dashboard name as well. So the project name, paste that in. Let me just see if there's anything else.

Project URL and on public key. So I think we need to go to API, which might be over here. API keys,

which is right over here. We're going to create a publishable key. That's one that we want. And

then I'm going to copy this. And then I'll say publishable key. I'm just going to paste that in.

Okay. So now this should be everything the model needs. I'm not entirely sure. I think it is. So

we're just going to give it all that information. We're going to have it do the rest of this for us.

Um and then cool. Looks like this is going to take care of that. That's going to take care of the database schema. Oh, sorry. We need to take care of the database schema as well. So anyway,

I'm just going to give this its information and then we'll have it tell us what to do next. And

now we'll have edited an ANEV file, which is pretty clean. It's going through and it's adding the information that we just gave it a moment ago. And now what it's going to do is it's going to give us what's called an SQL schema, which is just like the next step. And I imagine it'll just ask us to copy and paste something. It's also doing things like wiring up the login and signup forms

to Superbase O, which is super cool. So I mean, we should have basically everything good to go aside from the landing page after this is done. Okay. Okay. And then it's told us to go over here to SQL editor and then paste this giant file in. Um, so I just did that. Since these are comments, this is just going to run a bunch of these simultaneously. So I'm going to click run selected. Okay. And then

it told me to go over here and then paste all the stuff in and then just press run. So that's what I'm going to do. This will basically create us a bunch of um tables and whatnot in our database.

So if I go to database now, we we're going to have a bunch of different tables and they're all going to connect in a specific way. And this is now taking us to a signup page here. We obviously

still have some changes that we need to make. So, I'm going to do that after I verify whether or not this works. Now that it says signing up, account created successfully. Please check your email to confirm your account. I don't know if um we're going to get that because sometimes we have issues receiving emails. So, let me just pump over to my own Gmail real quick. Okay. Yeah,

looks like we did. So, I can now confirm my mail. Um that's taken us to I think like this hastily putting together landing page, which is not actually the page that we want. So, I'm going to click sign in. And then I think my email was this. I'm not entirely sure. And then my password was that. Let's click sign in. Okay, cool. Yeah, we actually did sign in. That's wonderful. Um,

was that. Let's click sign in. Okay, cool. Yeah, we actually did sign in. That's wonderful. Um,

perfect. Now we have this dashboard, which is kind of neat. My tasks. Uh, cool. We can click new task. Now we can create a new content order. So, I'm going to go example content order. Make

new task. Now we can create a new content order. So, I'm going to go example content order. Make

XYZ. Cool. And then we may have to change the order options here, too, cuz I don't think I uh included that. Let's just select that. Click save. Okay. Let's just make more characters. Okay. So,

included that. Let's just select that. Click save. Okay. Let's just make more characters. Okay. So,

there's some issue with the database because it's not refreshing. So now what I'm going to do is previously we're just testing the design and then iterating on that. Um now I'm going to discuss like functionality. Hey, this looks great. I created a new task using the new task button, but when I went back to check the list of tasks, I didn't have a content order in the database.

So I'd like you to double check why that is. It may be an issue with the adding to the database or it may be an issue with the pulling from the database. If there's a table problem or something like that, let me know. While I was doing that, I noticed that there was an order options section on the right hand side of um the new orders page. It looks like uh there aren't buttons or anything

here. Like I can't really toggle this on or off. So just refactor that so there's toggles

here. Like I can't really toggle this on or off. So just refactor that so there's toggles um and those toggles actually do something and they're meaningful. And then also make sure that whatever we're seeing in this chart, it accurately reflects the data in the database. And then I also noticed when I tried oh on the landing page here it's a mixture of orange and purple designs. I

just want you to make everything here purple. The signin button is um almost transparent. It's very

difficult to see. And I'm noticing that there's no way to log out once you're logged in. So just add that functionality as well. I need to be able to log out. Can't just stay logged in forever.

Cool. So I'm just going to pump all that stuff in and then I'm going to go. So we're getting closer and closer to the end result. Cool. also just made some additional changes. I'm just going to head over to new task. I'll say five ways to increase XYZ. See in the right hand side we now have some toggles which looks nice. And I'm just going to add some keywords. I like the idea that

we could pick those. So I'll click save. And I'm still not seeing it in the database, which is kind of annoying. Uh must be some problem. Okay. And I'm just retesting this now. Create new content

of annoying. Uh must be some problem. Okay. And I'm just retesting this now. Create new content order. Blah blah blah. I'm click save. And looks like we actually got it in. There is still some

order. Blah blah blah. I'm click save. And looks like we actually got it in. There is still some fake assignees, I think. So, I'm going to I'm going to have that fix that. However,

if I click on this now, you can see that we have the brief and then we also have some keywords, which looks really nice. And then we have some really nice formatted stuff on the right, like details, format, word count, deadline, and so on and so forth. So, big fan of that. We see

the ID of the order up ahead, which I guess could be useful if I'm trying to contact my agency. Hey,

I can't see a thing on my dashboard. Yeah, what's the ID? Then, when we go to dashboard, we can now see this has been updated. And it looks like it's using some sort of mathematical formula here to divide this so that the top of this is always going to be equivalent to the total number of maximum orders in a in a certain period. So that's pretty neat. I like that. What else did we need?

Uh we didn't have the ability to sign out. So I'm just going to double check. Do I have the ability to sign? Oh yes, I do. It's just hiding behind my head again. So at the very bottom lefth hand

to sign? Oh yes, I do. It's just hiding behind my head again. So at the very bottom lefth hand corner, I click log out. Okay. Now I'm back to the client dashboard, which is nice. Uh what I'm going to do is I'll go back to sign up. Okay. And then that looks pretty cool. And then I'm just going to

try go back to the actual landing page. Nice. So it actually did fix this up. Although this landing page needs a lot of work, which we're going to fix up in a moment. Uh and then cool. Yeah,

we have the ability to sign up. We have the ability to sign in. I mean, this is pretty solid to me. I don't really think much else needs to occur. I'm going to modify the design on both the signin pages, sign up pages, and the landing pages. I'm going to make the landing page really sexy uh just to wow you. And then yeah, I think I think that's more or less it. Oh,

I guess what we should finally do is we should check to see if we if we have middleware. So,

what happens when I go slash orders? Notice how it immediately jumps back to the login page. How

about if I go /dashboard? Nice. How about if I go orders new? How about if I go settings? How about

if I go what else did we have? Notifications. We got notifications. Nice. So, it looks like our off middleware is pretty good right now. Um although I'm obviously going to have to double check that with that big prompt that I talked about earlier. Now, why don't we modify the design? And once the design's ready, we can actually push this and make this public. And then once this is finally pushed

and made public, we can um round out the the end of our site and it'll be really high-end and really clean. So again, for design, I'm going to go to dribble and then I'm going to find a really

really clean. So again, for design, I'm going to go to dribble and then I'm going to find a really nice high quality uh let's just see if we can find some really nice high quality screenshots.

I just want like a super sexy hero header, you know? I want it to just be insane. So why don't we go landing page? I just want this to be the the best thing ever. This is really neat. Elevate your

trading experience. Liquid brokers. H I think I'm probably going to want a white mode thing though, like a light mode as opposed to a dark mode. Cuz if I go dark mode, it'll just seem kind of weird.

So, I think what I'll do is this section over here that says AI powered adwords that find lead.

I think I'm going to roll with this. And then I'm going to try and have some cool animated section over there on the right. So, unfortunately, I think this is about as big as it gets. Um,

sometimes, again, they don't want you to uh like I don't know if you can tell, it's kind of blurry here. Sometimes, as I mentioned, they don't want you to uh copy these designs a ton. I'm still

here. Sometimes, as I mentioned, they don't want you to uh copy these designs a ton. I'm still

going to give it my best effort, though. So, I'll go back here. I'll paste this in. Excellent. Um,

what I want to do next is modify the landing page, the sign-in page, and then the sign up page. I'm going to attach some screenshots of the design. In addition, I'm also going to provide

page. I'm going to attach some screenshots of the design. In addition, I'm also going to provide you a an animation that you could use to run in that right-hand side pane. What I'd like you to do is I'd like you to combine our design with the design in the screenshot. I want it really clean on the left hand side. I want my main value proposition. I want some hypothetical logos um in

the center. You could just use some some plain text for that. You don't need images. Um, I want

the center. You could just use some some plain text for that. You don't need images. Um, I want a relatively long landing page here with sections for product, sections for pricing, hypothetically, uh, and then obviously a button up at the top that says sign in. And then for the video, I want you to use this URL. Now, what I'm going to do is I'm going to paste this in. And then I'm going to go

back here. And what I want is I basically want a cool asset. And then I want to like rotate it with

back here. And what I want is I basically want a cool asset. And then I want to like rotate it with AI. And I'll show you what I mean here. Uh, but basically I just want some sort of asset. Let me

AI. And I'll show you what I mean here. Uh, but basically I just want some sort of asset. Let me

see what can we get from dribble that looks really clean. Okay, so for that I'm going to go over to dribble and go 3D shape. Um, I really like one of these shapes, but I think I want this on like a white background. Let me see if we could get something that might make more sense. H organic

3D shapes over here. This is cool. Round egg 3D shapes. That's kind of neat. Feel like this would be nice if we could get a white background on it. So, why don't we give this a try? What I'm going to do is I'm going to take an image of this. Then I'll go over to Google video. Actually, sorry. Why

don't we start with Nano Banana? So, I'll go to AI Studio.google.com. You can sign up for this um you know, it's the same account that you would use for whatever credits you utilized for um Gemini and anti-gravity. Then I'll say, let's see, playground. And I want to generate images.

I'm going to paste this in. So, I create me a new organic shape that looks like this except with a fully white background. It should look very sexy and have a purple blue hue to it. And

then the aspect ratio, I think, is going to be 34, which is three wide and then four high. And we're

going to go 2K for the resolution and press enter. Okay, just ran out of token, so I had to go to a different account here. But it's important that the aspect ratio is 34 and the resolution is 2K because that's approximately the same height of the design that I wanted to copy a moment ago, right? Like this one is clearly taller than it is wide. And I think that's going to be important.

right? Like this one is clearly taller than it is wide. And I think that's going to be important.

Okay, so we have this organic looking image, which is kind of cool. What I'm going to do is I'm going to save this image as. So now this is like our own image. Then I'll head over to VO3, which is a state-of-the-art um image to video generation model. And then what I'm going to do is I'm just going to do the same thing. So let me just switch the accounts here. And then I'll

link the API key. Cool. And then what I'm going to do is enable Google Drive access as well.

And then I'm going to paste in this image, one that I just generated a moment ago. We'll go 9 by6. Just copy this image. And then go back here. Paste this

moment ago. We'll go 9 by6. Just copy this image. And then go back here. Paste this

in which I just downloaded. Okay. And then I'll say uh rotate this slowly. I

think 6 seconds is probably fine. So that the last frame is like the first frame.

Perfect. Uh 100% white background. Okay. I'm going to press enter. And now V3.1 is generating me uh video. Just playing this. Now we have this cool organic undulating rotating shape which is really

uh video. Just playing this. Now we have this cool organic undulating rotating shape which is really neat. So I like that a lot. I'm going to download this. And now I have the video. I'm going to grab

neat. So I like that a lot. I'm going to download this. And now I have the video. I'm going to grab this. And then I'm just going to dump this into public. And then I'll say hero header video.mpp4.

this. And then I'm just going to dump this into public. And then I'll say hero header video.mpp4.

Okay. And then um I initially said URL, but I guess what I really meant was like inside of my folder. public/hero header video.mpp4. Also put a dot here. Uh cool. I'm just going to press enter.

folder. public/hero header video.mpp4. Also put a dot here. Uh cool. I'm just going to press enter.

And then I'm going to give it some time and let it go on its way. Okay. Landing page design is looking all right so far. I'm not a big fan of this video now that I'm looking at it. Like I I would love it if it just blended in seamlessly, but for whatever reason, the background is not white. We could remove the background and then we could remove that border and I think it would

white. We could remove the background and then we could remove that border and I think it would look a lot sexier. I'm partial. I mean, I might play around with it a bit. Um, we got the logos down here. Sign in button top rightand corner. That's nice. I think we just need to align uh

down here. Sign in button top rightand corner. That's nice. I think we just need to align uh what's on like the the left hand side and stuff. So, yeah, I'm going to do that in a second. Sorry,

I just realized I was dictating. And then I'm just going to give it some instructions. Hey,

this looks solid. Why don't we align all content to the hero header? Because right now some of the sections are really tight. So push it out so that everything's at the same width as the hero header.

Um I'm loving the colors. Something with the graph under the why they prefer Taskbo section looks a little bit weird. I think the numbers on the cards of the maximize your traffic with the content engine that generates section um are broken or something because they're being cut off. So fix

those. And then everything else looks really solid. Just update the business name from taskb to content hamster as well. Uh and just do that across the entire app. And then while I'm at it, I'm going to see if I could find something that looks a little bit better for that section here.

Okay, I found this video and I really like this. I also think probably because this is already optimized, like the file size isn't really big, I'm probably just going to use it.

This is not a live SAS app. So, Ashkat Ash Moana, great job on said design. Um, we're just going to be using this as a a demonstration purpose. Um, it looks like he also allows you to explore or tweak this scene by checking it out in his spline community page. I don't even know what that means, but I think it's like a way you can share designs and stuff like that. So, that's kind of neat. Oh,

wow. I can actually revolve it. That's so cool, dude. Wow. So, I guess you could probably run this as 3D in your browser. Anyway, we don't want to do that. That's just a little too much. Um,

but I'm going to instruct the agent to use that image and then make sure the orb doesn't get cut off weirdly. Also had a couple of sleek cards placed on top of the video with a glass isomorphism effect. So, something to break it up a bit. And then I'm just going to jump back

isomorphism effect. So, something to break it up a bit. And then I'm just going to jump back over to our app here so we can see um as it's actually being developed in real time. You can

see we changed the name to content hamster. Kind of silly, but uh whatever. This has now done everything perfectly with left-hand side um margin match up which is nice. Why they

prefer content hamster? This has now been spread out. So the graph is no longer all weird. Again,

perfectly margin aligned. Something with the numbers is still off. So I'm going to have it fix that as well. Let's just do that before I forget. Hey, numbers on cards are still a bit weird.

Screenshot for reference. Then as I scroll through, is there anything else? plus premium.

Okay, ready to level up your process. Cool. And then we also have a bunch of buttons down at the bottom here that obviously don't really work. Okay, cool. This looks really clean. I'm liking

this. I'm liking this a lot. Um, I'd say the only thing that's missing is probably like the coloring across the board. Um, what I'm going to do now is I'm just going to match all of the colors to this because I just love the way that that looks. Uh, I'm just going to take a screenshot here and then

I'll say colorfinder online and I'm just going to paste in this color. And as we see here, there's this hex code. So, I like that a lot. And what I'm going to do is I'm just going to paste this in as well. Also, I want you to update the primary color scheme across the entire application so that it is

well. Also, I want you to update the primary color scheme across the entire application so that it is that shade of baby aqua blue. Looks really cool. use slightly darker shades of blue as accents, etc. And then for the accents, I guess I'll just go back to this. Screenshot it. Paste

this in here. And then we can use stuff like this as well. Um, and let's go a little lighter here.

We'll go this dark. Darkest. Cool. And now it's going to go through the entire app and just change it to reflect like the background colors of this which I think are going to be really cool. Um,

obviously I don't want, you know, us not to be able to see the text. So I am just going to be around like, you know, if this is that color, it will seem kind of weird. Right now we obviously have a cool purple thing going on with all the highlighted text being purple and then these things being purple. I do think it would just match really really nicely and seamlessly if we

had that. So we'll give that a try. All right, this is looking way better. I'm loving how the

had that. So we'll give that a try. All right, this is looking way better. I'm loving how the baby blues actually reflect what's going on here. Let's click try out for free. Um, actually I guess I already have an account, so I'll just log in. But we are going to test that out in a second.

Looks like those numbers have been fixed, which is cool. We got that slight zoom in on each card as well, which I really like. And then baby blue effect everywhere. That's gorgeous. Um,

this little content output graph is still purple. So I'm just going to see if we change that. One

thing I didn't really talk about was mobile optimization, but um, Gemini Mobile optimizes everything really, really well just out of the box. Obviously, we do have some minor issues with the bounding boxes of this um, like video, the border. Uh, but this is something that would probably be better done by actually replacing the core underlying asset because the resizing of the

border box occurs basically perfectly. Um, but just giving you an example of what it might look like on a tablet. As you can see, everything is still basically perfect. I haven't ran into major issues so far. Even the numbers and stuff like that are visible. And if we scroll all the way down, the biggest problem is just there's this little black overlap. I want you guys to know that

I haven't even done mobile optimization yet, which is typically just like a line in the prompt. Um,

really, really wild that it does this good of a job without me even having to tell it. Cool. And

now we have everything changed. So content output is nice and changed. Uh you know the the the look of the little bubbles here goes up. I mean this is basically exactly what we wanted. I also changed the name to content wheel obviously. So why don't we now sign up and go Nick Sarif. We'll call

myself Leftclick Inc. We'll just use a slightly different email this time just so we could retest the sign up. Uh let me just make sure this is a simple ass password. That'll always be the same.

Cool. We're going to click sign up now. Account created successfully. Please check your email to confirm your account. Uh, I'm now going to sign into the specific mailbox that gave me that. So,

let's go here. You can see it's saying to confirm my sign up here. So, I'm just going to go back and then I'll now be able to sign in with the specific email that I just put in. We'll click sign in.

Just delete all this stuff. Cool. And I'm just going to zoom in a bit so we can see. Obviously,

I have a really big desktop so it won't always look like that. Um, cool. We have total tasks.

You can see the styles been updated a little blue here because I just wanted it to be blue. Um,

task completion is still purple. So, I think I may update the graph. I don't really know to be honest. It might be okay. My tasks inbox. Cool. All that stuff looks good. So, we'll now test

honest. It might be okay. My tasks inbox. Cool. All that stuff looks good. So, we'll now test the new task. I'll say, "Hey, this is an example. Here's my example brief ABC." And then over here, we'll go 13. I'll click save order. Cool. We now have it in our database. It's now a draft. So,

content is being written. Your writer's currently working on it. You'll see it when it's ready.

Inbox. Cool. Um, awesome. I mean, this looks pretty solid to me. I don't see any major issues. So, we'll go to settings. We can update things. I don't know if this got saved, that

issues. So, we'll go to settings. We can update things. I don't know if this got saved, that little leftclick thing. Yeah, it doesn't look like that did. So, now that we basically have like the whole app ready to go, we just need to make a few, you know, minor changes before we deploy. Hey,

uh it doesn't look like the company. Okay. And then after a full endto-end check, this website and app is now ready to be pushed um and actually deployed. That deployment is going to occur on Netlifi like I talked about earlier. And I'm going to give you guys a simple simple process that you guys could use in order to actually push that out. For now, I'm going to go grab some lunch since I'm

pretty hungry, but I'll BRB. So, the strategy I'm going to use in order to push this site and make this web accessible just like we did with our old website is to use Netlefi. And in order to do that, we're going to use Netlefi CLI and then give the vast majority of the work to the model. Um,

so Netlefi CLI is basically just a command line interface. That's what the CLI stands for. That

lets previously people like you and I, but now mostly agents interact with the Netlefi API, which is like their little application programming interface. The way that you uh do various actions on Netlfi using HTTP requests autonomously for you. They can actually do most of it. So what I've done here is I've actually just said, hey, I want you to build this and then I want you to push it

on Netlfi. We've gone through the whole build. We've gone through phase one, two, superbase,

on Netlfi. We've gone through the whole build. We've gone through phase one, two, superbase, you know, phase three and now what we're doing is we're doing this final production deployment and this is uh you know just uh part and parcel more or less the final step of getting this thing on the internet. Now, I should say that when you actually push things to production, that's what

that's called, typically there are some issues because the development environment that you run on your local computer is always going to be a little bit different than whatever the heck the server is using. And so, sometimes you have to make minor changes to the site. Sometimes

you have things that work on your device, but then don't work obviously on the production server. So,

you have to, I don't know, modify like the the way the database works, some of the permissions and stuff. And that's just part of dealing with any sort of full stack application.

and stuff. And that's just part of dealing with any sort of full stack application.

wasn't a big deal with our website because our website was obviously not super interactive. It

was just a bunch of uh links. But this has some back and forth and that's what's important. So,

as we scroll up here, we can see this has actually gone through the build process, which is basically taking our website or what our website should look like and then turning it into like an actual instantiated version of the site. That's what that is. Um, and now it's going through the installation process for the actual Netlifi CLI, which is a little package. And now it's going to

communicate with the Netlefi CLI. And all we have to do is we just have to authenticate. So

assuming we have an account set up and stuff like that. And what we have to do is we have to go and actually log in. So what I'm going to do is I'm going to open this up. So I'm going to um give it a new terminal tab which is what it's asking for. You can do that by going control shift

um tilda I think it's called. It's like that little thing in like the top leftand corner.

It looks kind of like this. Uh you should also be able to do this by going up to the top and then going terminal and then going new terminal. And then I'm just going to paste this Netlefi login command. And in my case, you know, I've already done this on my machine a bunch of times. So it'll

command. And in my case, you know, I've already done this on my machine a bunch of times. So it'll

say it's already logged in. In your case, uh you know, if you haven't done this login before, it'll just pop up a little Netlify panel and then you can do it there. So I'm going to say done. And now

it's going through the various building procedures and so on and so forth. So, my expectation is I mean there's like a 50% chance we oneshot this because we are using a pretty standardized framework called next.js. Uh there's a 50% chance that we're going to have to go back and forth.

It's saying the deploy is live. I'm just going to refresh this and check for myself. Okay. And

you can see we did push the actual website side of things up. So, that looks good. Just exit out of this so we can get like the the full glory of the site. And I'm not seeing any major problems here versus the one that was on my machine, which is cool. You know, we got these little buttons.

premium get started now. Okay. And I mean, we haven't added links to all these yet, which is why these aren't actually popping up. Uh like changing my um little cursor when I mouse over, but that's okay. And now what I'm going to try is actually the interactive component. Cool. So,

we have the account created successfully modal. And that's great. I'm now going to head over to that specific email address and just check if we have the email confirmation message. Okay, we have this right here. So, I can confirm my mail. And now we're starting to see one of the issues. So,

error parsing package.json JSON file. And it looks like the reason why we're getting that is notice the URL up here. The URL is not actually uh the publicly accessible URL. It's this localhost 3000.

And so the way that you know user signups usually work is basically there'll be some URL here slash some code and then the agent will configure your Nex.js or whatever full stack app framework you're running to like accept this code and then use that to verify the account. But basically

what's happened here is the default sends us to localhost 3000. And so I know what the issue is, but just for the purposes of like debugging and stuff like that, I'm actually going to just take this to my agent and I'll see what the agent says. We have to go back into our Superbase settings and then alter it. But I do just want you guys to know like how this works if you guys are actually

debugging it. So I'll say I received this error, this um call back when setting up my account.

debugging it. So I'll say I received this error, this um call back when setting up my account.

this isn't the right URL. What should I do? And you'll see here it'll instruct us to go to our Superbase and and make some minor changes. And then it's going to tell us to update our Superbase dashboard settings. So, go back into my dashboard, which is right over here. And then there's going

dashboard settings. So, go back into my dashboard, which is right over here. And then there's going to be an authentication page right over here on the top left. And then it's either going to be an email or somewhere else. Like we can actually turn off the um confirmation completely. This is

the email that Superbase sends them. That's why it looks a specific way. And I don't know, to me, it kind of looks a little ugly. So, obviously, if I were running a full production app and I were making all those uh little bells and whistles, I'd make this look really pretty. But I think there's actually a way to change the URL. Okay, here it is. It's right under URL configuration. It's

a site URL. And so, what I'm going to do instead is I basically just want to get the the live URL, which is this one here. Just going to paste that in. Okay. And I'm going to remove that back slash.

So now this is going to be the URL that it uh basically redirects us to on Superbase's side cuz Superbase handles the the signups and stuff like that. And now when I go back to the app, I don't even have to actually make any uh major changes like I don't have to rebuild the app or anything. Then I can give it an email. I click sign up here. And now we have another email sent

anything. Then I can give it an email. I click sign up here. And now we have another email sent to another one of my addresses. There you go. It's right here. When I mouse over this, you guys can't really see in the bottom lefthand corner, but I'm no longer going to localhost. And you can

see if I click on this, takes me to contentorb dashboard.netifi.app/lo. So here I can actually um now jump in and log into the app. Cool. So that's one of the first changes I would say if you're building something on production versus doing something locally. We just have to change the URL that the authentication goes to. So we just did that. Now it's nice and clean.

And I'm scrolling up and down here, making sure there are no major issues that are egregious. I'm

not seeing any problems. I guess the company isn't filling in. So, we can change that. Well, I write this. Save. Give this a refresh. Yeah, looks like the company in the profile details isn't filling

this. Save. Give this a refresh. Yeah, looks like the company in the profile details isn't filling in. So, I'm just going to take a screenshot of this and then I'll paste this in. And then

in. So, I'm just going to take a screenshot of this and then I'll paste this in. And then

while I'm like before I actually send this, cuz I prefer just to do a bunch of stuff, not just one, let me test the new order. This is a new order. What's up? And then over here, I'm going to go one word and then I'll save. Okay. So, yeah, this is actually in my database now, which is pretty

cool. I can click on this. Looks like the rest of this stuff is is here, which is nice. Anything in

cool. I can click on this. Looks like the rest of this stuff is is here, which is nice. Anything in

my inbox? Nope. That's cool. And then my actual orders do populate, which is nice. And we don't actually have like the ability to like we don't have any people on our team, but obviously we could have added some, which is why we still have those little um little fake Notion-esque people there. I wonder where they're getting those images from. That's kind of cool. Okay, so uh we

people there. I wonder where they're getting those images from. That's kind of cool. Okay, so uh we have dashboard. Did we I think we checked settings as well. Yep, that looks pretty good. And I think

have dashboard. Did we I think we checked settings as well. Yep, that looks pretty good. And I think every other toggle here probably works. Let me just try searching the tasks. So I'll just go O H. Okay, so yeah, clearly it's just searching based off the letters. If I type in new order,

H. Okay, so yeah, clearly it's just searching based off the letters. If I type in new order, if I type in old order, then it won't be. Okay, cool. So if we had 20 in here, you know, that might actually be useful. And let me just check the sign-in page. Okay, cool. So, we're

immediately being logged in when we click the signup page. And then, you guys can't see this, but in the bottom left corner, I'm just going to click log out and see what happens. Okay,

so when you click log out, it takes you straight back to the login page, which is the desired expected behavior. And then nothing is prefilled. Let's now check all of our routes. So, I would

expected behavior. And then nothing is prefilled. Let's now check all of our routes. So, I would always recommend going through every single one. So, that's dashboard. This is settings. This

is orders. This is orders. um I think and then slash new and then there's also a notifications.

So notice how none of these are automatically signing in which means some of our off uh is fine and you know all of our animations and stuff like that look really clean and uh there there are no problems on that end. Okay. And then I'm just going to do a final spot check because although I told it to um you know mobile optimize the site, I do want to make sure that it is mobile optimized.

This looks really clean. You know the only issue here is with this little background not being necessarily the same as that. I guess we could just change the background color of this whole element. That might actually help. So, yeah, why don't I do that? That's a really cool thing. Um,

element. That might actually help. So, yeah, why don't I do that? That's a really cool thing. Um,

why don't we adjust the background element of our little orb to this? Adjust the background color of the element that contains the animated orb to be the same as that background color of the orb. This

should be our light aqua baby blue. Okay, that looks nice. And then just scrolling through here.

Any other issues with the mobile optimization? Just make this really nice and small. Be 100%

sure. Nope. Everything here looks like Oh, you know, there is one. Looks like this learn more is not immediately underneath the get started now. So, that's one final thing that I'll do. I'll

finally say also the learn more button is not um underneath the what was the name of that button?

Get started now button. So, I'd like you to line them up on mobile. Now I should know because this is no longer local on our computer. It's on netlefi the uh debug in an iteration loop takes a little bit longer. Naturally when we were just on our computer anytime we'd have an issue we would just say hey rebuild it. It would rebuild it and then we'd immediately have access to it. Right?

But here we actually need to make the changes locally on our computer push them to Netlefi have Netlefi do the build and because Netlefi is sort of doing free server space takes longer and then we actually have to go online and then um you know take a peek at the website. But anyway,

I'm uh just going to open this up now. This is the production version. I should be able to see the background and everything like that. Nice. And now we have more or less my exact desired behavior, which is how that orb just looks like it's floating. And it doesn't matter how big or small the website is. It's just like perfectly contained within those bounding boxes. Super

clean. Um and then I just had a couple of those other changes. Just going to verify that those are good. The last thing I'm going to do is I'm just going to go down to my security audit prompt.

are good. The last thing I'm going to do is I'm just going to go down to my security audit prompt.

scroll all the way down to the bottom. And there's just a little bit of nuance here. Um, I'm

not actually going to do this in the same thread that I launched and built the entire website. So,

I'm going to use Claude Code for this instead of Gemini. And the reason why I'm doing it is cuz I don't want any context. I basically want the model to look at this entire codebase as if it's new, fresh, and not mine, like somebody else's. And I want it to like run through this whole checklist and to end and tell me whether or not it's configured. Okay, so I just copied this all.

I'm going to head back to anti-gravity. Close these tabs. And I should just be able to do so by clicking close all. Let's make this smaller because we're going to have clawed code instead.

And then what I'm going to do is I'm going to paste this in. Then I'm going to say don't make any changes. I just want the audit. Okay. And I'm going to pump this in. And now cloud code is going

any changes. I just want the audit. Okay. And I'm going to pump this in. And now cloud code is going to go pass one discovery map the full architecture and then more or less tell me, you know, what's good, what's bad. And I'm doing this for a couple of reasons. Um, obviously I want no context as mentioned, but I also think that Claude is a lot more interpretable than Gemini right now. If

you guys check out the thinking tabs here, and if you compare them with the thinking tabs of, you know, Gemini, Gemini uses language that just doesn't really make much sense. Um, you know, when you look at it, it's not as interpretable. I'm now taking action to apply the color adjustments as previously decided, focusing on the background's visual look. I'm now proceeding

by updating the styling to use desired hex code. You if you look at it and just compare it to this, this is a lot more interpretable. I now have a comprehensive understanding of the codebase. Let

me compile the architecture summary and then work through every checklist item. They give

it to me sort of in plain English. And so the interpretability is pretty important when you're talking security, right? Um in addition, you know, I just think Claude is a little bit better at like security based stuff right now. Okay, so I'm I'm reading through everything here. It

looks like most of our audits are correct. We do do console. Calls, which is important. Um,

this is basically a way to minimize the attack surface uh and then minimize or maximize operational security. We're not really giving away how our underlying tool works. So that'll fix

operational security. We're not really giving away how our underlying tool works. So that'll fix that. Startup validation. Okay, so we need some sort of startup validation here. It looks like

that. Startup validation. Okay, so we need some sort of startup validation here. It looks like we can't tell whether or not the RLS is enabled um because we don't actually include the files in the codebase, but that's okay. We are actually good on RLS. Uh that's why it's giving us this warning message as opposed to a no. We're good on SQL injection, security definer functions, same

thing as uh previously. So we could have um claude like connect to our superbase instance via API if we want. And I'm just going to take all of this default deny routing fails. This is important.

we want. And I'm just going to take all of this default deny routing fails. This is important.

Remember how I talked about O middleware? This basically just immediately denies all requests that don't have some form of authentication. Right now our app doesn't do that. And you know, at the end of the day, we while are okay on most things, we're still missing some uh some things there. So,

I'll say excellent execute all of the changes. Okay. So, I'll say um the SQL stuff was already taken care of. RLSTC, but thanks for pointing that out. Execute all of the remaining changes

and change SQL checklist items to green. And now it's going to go through and then work through the fix the systematically form. And just to give you guys some more visibility in the security side of things, you know, previously we had a line in our code that said if there's an error, we actually add all of the superbase insert error details here. This is actually just like gives a bunch

of information about the way that our superbase database is configured. And that's just because Jeem and I wanted to write it in the way that was, you know, debugable for us if you guys remember.

Well, this now went through it identified that and it changed that to fill to create order, which is just much more general. And um that both gives us the ability to quickly see if there is an issue, but then it doesn't expose any of our underlying in infrastructure architecture if somebody actually wanted to attack us. As you can see, we have most of the changes that we

talked about before. We have allow list routing. We have client side user ID filtering. Okay,

server side validation. We added what's called an off call back route. Um we have environment variable validation. And we also had some console leaks that we've since cleaned up. And just

variable validation. And we also had some console leaks that we've since cleaned up. And just

scrolling through to get to that checklist, you know, the vast majority of these are now green. all the issues that we had previously have been taken care of. And so 5.1 which was a dev

green. all the issues that we had previously have been taken care of. And so 5.1 which was a dev dependency and then 6.2 which was some built-in rate limiting. You know, we don't have control over that. And these aren't really large security issues as well, which is why they're in this

over that. And these aren't really large security issues as well, which is why they're in this yellow little warning label instead of the X. Um, you know, we're now good. We've basically solved for the 8020. The vast majority of lowhanging security fruit do no longer apply to our app.

And while I probably wouldn't scale this to like a million users without at least having some sort of security person look this over, it's pretty dang good. I just did a final walkthrough of the site.

We have the animation, which was previously hidden because of that middleware update. Um,

some of our icons are missing as well because of that same thing, as well as the login uh and signup routes, as well as every other feature in our network. So, this is an example of like that extra step at the end that a lot of people don't want to do because obviously it takes, you know, an additional 15 or 20 minutes. It's about how long it took me, but I highly recommend it if

you do plan on making your app live. and actually launching it to more than just yourself and your close friends and family. But congratulations, we have now built an endto-end full stack app with login, authentication, signup. We have a database where we store records and queries and then also a pretty sexy landing page. You guys now know everything that you need in order to

basically take this knowledge and then go out and actually just vibe code an app. What I want to do next though is I don't just want to vive code any app. I want to take you guys to a higher level of understanding of modern software engineering principles cuz I think it's one thing to be able to just use natural language to, you know, communicate with agents and have it do something.

But some of these architectural decisions that the agents are making are actually controllable by you. And if you know even 10% more than the average Vibe coder, you can, you know,

by you. And if you know even 10% more than the average Vibe coder, you can, you know, rather than this process takes 2 or 3 hours, you can basically just build like your little starter kit with um your preferred stack, your preferred tooling, and then some preferred examples.

you can get to the point where you could actually just like oneshot uh an app like this. Maybe not

completely oneshot but like 1.5 shot it. Take uh app creation which previously might have taken a very very long time because of all these small little decisions that you and I have to make and then get it to a point where it's it's much faster. And not only that, I think you'll probably gain a lot more appreciation for software engineering as a whole and then become a

better developer um whether or not you're working in conjunction with agents. So let's do that next.

Now, I should know that this isn't going to be a comprehensive software engineer degree or anything. In fact, I know there are going to be some software engineers in the comments.

or anything. In fact, I know there are going to be some software engineers in the comments.

They're going to look at what I'm talking about and probably laugh. They're going to say, "That's not how to actually host. That's not how databases work or whatever the heck." The reality is, you don't need to know all of the internals of how all of these different things were put together. These

are essentially things that were built over the course of the last 50 or 60 years. And nowadays,

even the most competent developers typically just stand on the shoulders of giants. And so,

I'm going to give you a very high level overview here. And this high level overview will, like the rest of the course, be the 8020 that allow you to dive deep into specific parts if you so want to.

Um, but you won't necessarily need to hear me yap on for 700 hours about different database architectures. Okay, so we're going to start with hosting. To make a long story short, hosting is

architectures. Okay, so we're going to start with hosting. To make a long story short, hosting is just the technical term for running your web application on a server. works on my machine is the scariest thing a developer could say. So, it's important to do this right. You know how a few minutes ago when I was developing that app and then pushing it live, there were immediately

some problems. Well, what a lot of developers will do is they will develop entirely locally and then they'll say, "This works fantastic, amazing." And then they'll leave the pushing and the deployment and and you know, all the hosting and stuff like that is sort of an afterthought. And then when they actually do push it, then there's a bajillion problems and the app doesn't really work. And then

as you saw there's also a longer feedback loop because now this is live on the internet it's not on your machine and that longer feedback loop can make you know that last mile problem where you've done 99.9% of the work uh of your app but then that.1% takes like 100 times longer just because of the nature of your your prepare preparation or lack thereof. So in order to really get this

we just need to give a brief highle walkthrough of how communication um on networks tends to work or like on apps. Basically on the left hand side here we have a client. And for all intents and purposes, let's just say this is um your browser. Okay. Now client is just such a silly name. I

would say not a lot of people really understand this, but I just replace basically all instances of the term client with just your browser for now and everything will make more sense. Now your

client, okay, it's just your browser. It needs to communicate with a server in order to have some sort of back and forth. And so this server, okay, could actually be like your um computer if you're developing locally or if you know you're pushing to some, you know, service or whatever, it could be something like well maybe Nellifi isn't the right example, but I don't know. Yeah,

I don't know if you guys ever used Hostinger for instance, not affiliated with them, but um that's a good example of one. Or let's just see Hostinger alternatives. Blue Host, if you guys have ever developed a WordPress website or Cloudways or Site Ground or Insta. Basically, these are services out

there that run computers just in the cloud that you can then access in order to like push stuff on it. Okay? So, what happens is your client, okay, your browser will communicate with the server,

it. Okay? So, what happens is your client, okay, your browser will communicate with the server, which if you're running stuff locally is either just your computer or it's somebody else's computer on hosting or site ground or whatever other service. And then it'll send initially some very simple and brief requests, okay, for things like um you know site HTML. It'll send uh requests

for things like uh database data and whatnot. And so your server has the ability to do a lot of its own logic and whatnot. And so in general, what clients um are for are they're just for like presentation. And then what servers are for is they're more for like the heavy lifting and the

presentation. And then what servers are for is they're more for like the heavy lifting and the logic and the validation and stuff like that. That's why server side validation is much more important than client side validation. That's why it's a big security risk. The thing is in addition to the server, there's like a third piece called your database where we actually store like a

row or tabular data. And you know, for all intents and purposes, your database is just one big Google sheet. There's like an ID column, there's like a date created column, there's like a I don't know

sheet. There's like an ID column, there's like a date created column, there's like a I don't know value column, and then there's uh just a bunch of stuff here. um where basically what your server does is it will make a request to this database to receive specific pieces of data that the user has requested. So if the user has an ID of 23 foi whatever, okay, and then you know the request is,

has requested. So if the user has an ID of 23 foi whatever, okay, and then you know the request is, hey, I just want you to grab the value. What it'll do is it'll return 2 3 4 2 3 4 um over and over and over and over again. Okay, so that's that's pretty cool. Um the reason why we split these two

up is just servers are obviously computers. This is obviously just data. Data are not computers, although computers can contain data. You could theoretically contain a bunch of information on your server, but why would you pay for all that when you could just use like a highly optimized service that just stores a bunch of records and then communicates really quickly. So anyway, let's

say our client is requesting some data. Like if you if you go back to our app, um it's requesting that like little dashboard data. Let's see how many orders do we have in the database. What it'll

do is, you know, we we'll first we'll sign onto our app. We'll initially make that request to the server. It'll return a bunch of HTML and um any pre-existing or cache data, okay? And then it'll

server. It'll return a bunch of HTML and um any pre-existing or cache data, okay? And then it'll visualize it. And then after, you know, you the user will navigate on the website and you'll say,

visualize it. And then after, you know, you the user will navigate on the website and you'll say, "Hey, you know, I want to, you know, you'll you'll click uh the dashboard button and then that'll be like, hey, you know, I want to go grab this data and see how many records I have." So,

what'll happen is we'll send that request over to the server. The server has a bunch of um pre-built logic basically that says, "Hey, when a user requests a specific dashboard data, I want you to call the database using this format and then retrieve it." And then we'll say, "Hey, you know, we want the dashboard data." It'll do this in a slightly different language,

typically SQL, although there are no SQL databases as well. And then it'll return, you know, that dashboard data. The server will do some additional validation if it needs to, and then it'll just

dashboard data. The server will do some additional validation if it needs to, and then it'll just return that to the client. And so this is just a loop that goes on over and over and over and over and over again. If the client updates something like let's say we create an order, well, it's the exact same thing. We'll just send a request to the server. The request will say create order. Server

will be like, okay, cool. So here's how I create an order. Then it'll take that request and send it to the database which will then add a new order to like your orders table. So very very high level um overview of how basically these modern web apps work. And I'm going to talk a little bit more about like the prevailing frameworks in a second because there are now apps out there kind of like

this service I'm using right now called Excaladraw which does things both online but also locally.

And you can really dive deep into that rabbit hole if you want. But um without further ado, what's the actual development process look like? Well, for us it's basically we just start local. So when

we start local, we run both our client and our server on the same computer, right? Our client is like our browser and then our server is just like, you know, your your your computer running that process. Then we test and verify just like I did a moment ago for my app. And then once we're done,

process. Then we test and verify just like I did a moment ago for my app. And then once we're done, we push to what's called a staging server, okay? Which is sort of like an intermediary between um having everything on your machine and then have everything accessible to your customers. Once it's

on a staging server, we then test and verify. And then once we're done testing and verifying, then we and only then do we actually push to production, which is like the thing that um customers and and users can actually use. And so the process is basically always just like um local staging production. And this is not super relevant for our last step, but it'll become more relevant

staging production. And this is not super relevant for our last step, but it'll become more relevant when we use things like GitHub repositories and version control because there are changes that you can make locally. other people can be working on changes on the staging server and then other people can be working on changes even on like the production server. Although ideally you

don't make live changes because a single live change can like screw up your your whole work um like your whole app like you saw earlier. Uh and then you can actually just spread it across have multiple people working on multiple things simultaneously. So that in a nutshell is basically everything you guys need to know about hosting. Um you do obviously need to pay for hosting for

most services like you know you're not going to be able to sign up to hosting or or site ground or whatever for free. This is basically you renting a computer for the purposes of hosting your application on it and then having users interact with it. And obviously every time some user goes to a website or whatever and there's a request made to the host, the host consumes a little bit

of electricity. There's like a little bit of of a cost back there. So they um they arbitrage that

of electricity. There's like a little bit of of a cost back there. So they um they arbitrage that and then they charge you some big multiple. And there's like a bajillion hosts out there. There's

like VPS's, virtual private servers. There's like dedicated um computers or dedicated servers you could buy. There's like whole computers basically or whole servers that you could buy. Or what they

could buy. There's like whole computers basically or whole servers that you could buy. Or what they do is they take one server and they divide it into like 50 servers and then slowly partition it out.

There's like so many different ways of doing this that it's not really worth us getting into. But

suffice to say, this is just like the basic model of um communication. Another thing that's really important to understand are databases. Now, for all intents and purposes, like I talked about, these are basically just like a Google sheet. If you guys have ever used a Google sheet or you ever used Excel or anything like that, the best mental model I found so far is just to

treat every database that you use like um a Google sheet. So, just like a Google sheet, you'll always have like header row, uh, a header row, which is basically just like the titles of every single column in your database. So, in this instance, for instance, our table, which I just move my big head out of the way, is called sheet one down here. Okay? And sheet one, okay, is just one of

many possible tables in our database. We can make 100 more tables if we wanted to, but they're all going to be divided into like sheet one, sheet two, sheet three, or whatever the heck we title them. Now inside of sheet one um we have uh three columns here. The first column has a header name

them. Now inside of sheet one um we have uh three columns here. The first column has a header name or a key of id. The second has a header name or a key of date underscore created and then the third has a a header name or a key name of value. Now underneath this sort of initial row which just

defines the names of all of the various fields. Um we then have the values themselves. And so this is a database for instance that contains a one record or one row. If I duplicated this a bunch and then I don't know wrote some other IDs here because this is going to be important. You can see now we have a database um with one table called sheet one that now consists of four rows. Okay, the thing

is depending on the type of database that you're using. Okay, you need what's called a primary key.

And a primary key is just something that's unique, one column that is basically always unique from row to row that basically defines that row or that record as like being super unique and not existing anywhere else. And so for the purposes of this database, the primary key is going to be the ID because the ID is always going to be different between each record. If you have two records with

the same ID, obviously there's a conflict. If you think about it logically, the reason why we need it structured in this way is because if we have instructions in our server and the instructions are to pull a specific record from a database and it's like, hey, I want you to grab the record with the ID 23FI23F2 and it turns out there's like 10 records like that. You'll return 10 records and

how are you supposed to visualize 10 records? Like that's going to, you know, it's going to screw up whatever your logic is unless you specifically handle for that. And so these databases for the most part, most people that vibe code apps suffered using the SQL database with um separate primary keys are typically organized in that way where you have one sort of like starred column.

And so I'm just going to make this one the starred column. It's the yellow one. And then these here can be the exact same. Like you could technically have 100 records all created in the same day, but since they have different IDs, they're all different records, right? Same thing with the value. Okay? So just like in a Google sheet or an Excel file, you can actually like filter things

value. Okay? So just like in a Google sheet or an Excel file, you can actually like filter things out. Um you can do the same thing inside of a database. So if I go back to our little example

out. Um you can do the same thing inside of a database. So if I go back to our little example here and then um I add a filter which I can do on sheets really easily just using a little hotkey.

You can also just go to data and then you could click on create a filter if you wanted to follow along this demonstration. What you can do is if you click on this little filter button you can see that you can now just filter specific records. Like I could for instance only grab um you know this record here 23FI. Okay. And if I did so it would remove all of the additional

records here and then I'd only be looking at this data. And so every time that a server makes a request to a database, that's basically what it's doing under the hood, it's just doing this in like a fully automated fashion. Likewise, I can filter based off of fields that are not my primary key.

So maybe in date created, what I wanted to do is I wanted to grab all records that have 2025-10-3.

So as you can see here, now I'm grabbing multiple records, okay? But each of these have different primary keys. And this is just a way that I could filter stuff. It's just like using a search bar,

primary keys. And this is just a way that I could filter stuff. It's just like using a search bar, right? You can do the same thing for value, do the same thing for whatever the heck else you want,

right? You can do the same thing for value, do the same thing for whatever the heck else you want, um, you know, in your database. So basically every time that you send a request from you know your client your browser by clicking a button you send that request to the server the server interprets it. What it's doing is it's sending another request to a database which um you know

interprets it. What it's doing is it's sending another request to a database which um you know is basically just acting like a big Google Sheets filter. Now the cool thing is there's two major types of databases right now. The first is called SQLbased. So SQLbased is divided into a bunch of different popular versions. I mean really there's like a thousand but three most popular ones right

now are my SQL postgrql which is probably the most popular one and then SQLite and then you also have what are called NoSQL databases like MongoDB and Cassandra. How I've always worked with the differences is SQLbased databases basically fix the column headers and so it's always going to be the same column headers for all the data and all of the records that go into a database.

And so just like here we have those three column headers ID, date created and value. Basically,

every single record in this database will always have an ID because it's the primary key and can optionally have either a date created or a value or it could have both. And so, um, you know, for instance, you might get something that looks like this with a date created and then no value. And

that is what's called a valid record. Likewise, you can get something that looks like this with no uh, you know, obviously the IDs are going to be different. No date created, no value. And

you can also have something that looks like this. Okay? And you know as long as you have a primary key which denotes that this is a separate record um every other field is optional but it has to stick to this structure. Now no SQL databases are a little bit different in NoSQL I'm just going to create a new sheet here. Basically what we have is rather than having just like one header row up

at the very top I want you to pretend that every single item in your database has its own header row. And so the first record here will have ID, date created and values. So let's say the ID is

row. And so the first record here will have ID, date created and values. So let's say the ID is this, date created is this, and then the value is this. Okay? Or I don't know, let's just make it a little bit easier. Let's just call this uh we have a record here called first name. Probably makes

more sense. And then this one's Nick. So um you know what we have here is we have one record with an ID, a date created, and a first name. Well, for the next record, instead of just like sticking to this format, you could have whatever the heck you wanted. So I'm actually just going to paste this

down here. And then I'll say this record actually has um a last name instead. It has a date created

down here. And then I'll say this record actually has um a last name instead. It has a date created column and then it also has a date modified column. Maybe this date modified as 29th. If I

added another record here, okay, maybe what I have here now is I have a full name. This one's Nick Sarif. Then I also have my little date created a little bit over to the right. and maybe there's

Sarif. Then I also have my little date created a little bit over to the right. and maybe there's no date modified. And so basically what occurs in a NoSQL database is every single record has its own data structure rather than everything being 100% fixed and looking the exact same like we had with our previous uh SQL database. You know, every record will have an ID. Then it's optional

whether they have date created or value. But it's not like they could have another, you know, it's not like this row could have another value called uh first name called Nick, right? Unless

we explicitly define that up here as a value or a header that exists on all. Okay. Whereas

this would be empty empty empty empty empty empty empty and then this would be nick. Okay. It's not

like we can just add additional um features or or types of data. In a NoSQL database you have total freedom and flexibility. And it's a lot more like like a Google Drive folder where you're just storing a bunch of different documents and every single document could look a little bit different.

Now, obviously for our purposes, we want a simple way to like call a database and then retrieve all records that have a first name Nick Sariah or that have an ID of of something. Um, you know, we're going to use SQL for the most part. But there are some instances where NoSQL makes more sense. Um,

and if you want to look more into that, just look for the difference between like relational and a non-reational databases. Um, and then maybe you could have your agent tell you. Next,

non-reational databases. Um, and then maybe you could have your agent tell you. Next,

I want to chat languages and frameworks for people that might not be super familiar with them. So

there are three basic languages used these days in modern SAS app um sort of development engineering and I'm going to draw them as little bubbles and I'll show you how they all interact. The first

is probably the oldest which is hypertext markup language. The next I just copy this is a little bit newer and it basically took the internet from just a bunch of ugly static web pages to pretty dynamic and interesting web pages CSS. And then the third is how we got interactivity in the web, which is through JavaScript. Now, I'm not going to give you guys a big historical lesson on each

of these because to be honest, I mean, I just be googling this stuff anyway. Um, but suffice to say, HTML is actually like basically the only thing that you need in order to run a website. CSS

is sort of the design layer that makes things really pretty. And then JavaScript is just what allows you to build interactivity into pages like you clicking a button and then a new element appearing or something. And so to show you guys this HTML side, if you head over to info.sern.ch,

you can actually see the very first website ever made. And that website is called the worldwide web. This is literally describing the worldwide web. You know how all websites or many websites

web. This is literally describing the worldwide web. You know how all websites or many websites have www preended? That stands for worldwide web, which is a framework that people put together god knows how long ago now. probably at least 40 years ago. And so basically this explains how the internet works. Okay. Now obviously you don't need to have gone to this website to know how the

internet works more uh fundamentally speaking. I think every kid just inherently gets it when they are given their first iPad with Coco Melon on it. U no jokes aside uh the worldwide web is is a website that's entirely built in HTML. And you can see because the file ending up here is HTML. If I open this up you'll see the actual code of the website down here. And it's very simple.

HTML. If I open this up you'll see the actual code of the website down here. And it's very simple.

There's a body, there's a header, there's an H1, which stands for worldwide web, an AT, which is a bunch of links, and then P tags and and stuff like that. Now, worth noting that this is a website with no CSS, which is sort of the next level up. Now, CSS is how you change the style of the page.

It's how you make things bigger or smaller or or sexier or whatever. So, if I go style here, I can actually change the font size to like 300 pixels and I can make that bigger. This HTML is just that core fundamental um kind of structure, the scaffold of the page. This style is now CSS

and it's where I'm like applying some additional information to change the size. I could change the color and I could do so on and so forth. I could I could change things quite a bit. Now,

there is that one final piece which is JavaScript. And JavaScript nowadays is done mostly through the console. Inside of the console, you can actually run um JS. So what I could do is I could go

console. Inside of the console, you can actually run um JS. So what I could do is I could go document query selector and then I could look for all all H1's elements and then what I could do actually remove this from the page um just by clicking or writing document.query selector H1-E and this is an example of that interactivity that I was talking about. Basically with JavaScript

what you can do is you can I'm realizing that my head's in the way here so you can't see that most recent function. Um basically what JavaScript allows you to do is allows you to select specific elements on the page and do whatever you want with them. You can make them bigger, you can make them smaller, you can apply styles, you can create new HTML. I mean, there's like a bajillion different

things you can do. Okay, so those are the three programming languages. And hopefully we're all on the same uh page about how these two or three interact with each other. The thing is, obviously, if you design a website or a web app using HTML, CSS, and JavaScript, there's like a million different ways you could do so, right? You could write whatever website you want, apply whatever

styling you want, and then obviously apply whatever interactivity you want, and that's great.

But the internet thrives off standardization, which is where things are done in a repeatable and sort of consistent way. Because of this, the more standardized the internet tends to be, the better solutions that people can build on top of pre-existing solutions. And that's really the whole idea of programming languages in the first place. So in addition to this idea of you know

languages as um standardization you also now have this concept of frameworks as standardization. And

so frameworks are a level of abstraction that are built on top of languages. And what we do is we actually just take these three sort of Lego blocks and we just construct them in a specific way essentially. Okay. And right now there are a bunch of different frameworks out there. The most

way essentially. Okay. And right now there are a bunch of different frameworks out there. The most

popular ones I would say are next.js which is the framework that we just used to define and build our current app. And you can see that that include a lot of that included a lot of opinionated um framework based stuff for like the folder structure and components and hooks. These are all things that are basically a handme-down directly from our framework. You also have um vit right

now is super popular and you'll see a lot of apps created with vit and then on the other side you also have view or really like nux.js and there are varying levels of abstraction here like nux.js is actually an it's like a second framework built on top of another framework called uh react which is kind of funny. Um nux.js is built on top of view. Uh you know there are a lot of like dependencies

and stuff and if you guys remember earlier I said we stand on the shoulders of giants. really do uh because everything nowadays is built off of something somebody else built which was built off something somebody else built all the way down to where we were programming computers with little ones and zeros on pieces of tape. And so in addition to you know our chosen tool and

this is the tool I'm going to be using for the most part throughout this course. NextJS being

essentially the way that we coral these three programming languages together. Nex.js JS is also an opinionated framework that um you know helps us organize things like hosting, helps us organize things like how to do you know database calls and whatnot in a standardized way. You guys remember earlier we talked about middleware authentication middleware uh has a standardized interface for

authentication middleware is a standardized way to put together routes which are just the names of like um website endings. So excalagger.com/ I don't know settings that's a settings route for instance and so on and so forth and what's really cool is because a lot of people have used these frameworks before you know like NexJS isn't Neo was developed at least half a decade ago if not

more I built tons of projects with it before we had the luxury of agents to do that for us because of all this we had a lot of pre-existing projects out there on the internet that were built with this and these were all used in the training sets of these large language models like you know opus gemini and so on and so forth which means make a long story short If you use a framework, you

usually get significantly higher quality results. Now, frameworks obviously have some baggage as well. The more opinionated things you put into uh you know a design system or whatnot, obviously the

well. The more opinionated things you put into uh you know a design system or whatnot, obviously the more lag that you can have, the bigger the files can be and and so on and so forth. But for the most part, these are a good balance of like speed, stability, reliability, and then also security. You know, because these frameworks have existed for a while, people have put together some

security. You know, because these frameworks have existed for a while, people have put together some pretty simple and easy ways to economize um our security and our ability to build apps. Okay. So,

am I saying that you have to like go and learn every single thing in HTML? No. CSS? No.

JavaScript? No. Um, do you have to read through all the NexJS docs? No. Although they are they are pretty cool if you wanted to. None of these things will necessarily make you like a better vibe coder. But I think it's important to at least be able to like look at the Lego blocks and see

vibe coder. But I think it's important to at least be able to like look at the Lego blocks and see how they fit together because if you don't, then you're a lot more liable to produce what I think a lot of people nowadays are terming as sloop out there on the internet, which are like simple vibecoded apps that aren't really well thought out and then interact with the rest of the internet in

pretty stupid ways. The last thing I want to talk about is version control. And to make a long story short, version control just answers the question, how do I store successive updates of files on a server as efficiently as humanly possible? Let me give you a brief little example. I'm sure you know back in high school or college or whatever, those of us that have gone there in the last few years,

you've run into situations where, you know, you're tasked with writing an essay. And so,

you know, you write your essay probably really late in the middle of the night with a bunch of Cheetos beside you. At least that's how I used to do it. And then, um, you save it as, I don't know, essay docx, let's say. You know, it's like a it's like a Google doc or something like that file. And you do it locally in your computer, maybe Microsoft Word, okay? And then,

um, the next day, you know, you wake up and then you give it to your friend, and your friend gives you some feedback or something like that. Okay? So what they do is they they download the file and then they give it back to you and then it's called essay with feedback.docex. So what you do is you take that file but not wanting to lose the previous two files what you do is when you make

your updates to it okay you don't save it as essay with feedback you call it essay 2.d dox and then the cycle just repeats itself three or four times then you have essay 3.d dox you have essay 4.x doc

x and so on and so on and so forth until you have essay final superfal important docx. Okay. And

before you know it, you know, your whole downloads folder is a mess. I'm sure we've all probably had situations like this before. Um I know, god forbid, I I used to have situations like this all the time. Now, that's for writing things like essays. I want you to imagine instead of essays, what you're doing is you're working on an app like we're doing. You'll have app one dot whatever,

app two dot whatever, app three super important final whatever. Obviously, these things can get out of control really quickly. What compounds the issue is this idea of needing to share files because this super janky ass method, this could work if it's just you and you understand how you name your files and stuff. You could build like a naming convention, right? But what if you want to

share this with like 20 other people and 20 people all simultaneously need to be able to work on the file that is the most updated without causing conflicts and stuff like that and so on and so forth. That's really the whole idea behind what initiated version control. And so what we do is

forth. That's really the whole idea behind what initiated version control. And so what we do is we basically have again standing on the shoulders of giants um built systems out there that store not only the file itself but store the changes between files and then just let you access them by you know calling a little URL or something and then pulling the file as well as a list of all the

changes um that have historically occurred. So that at any point in time, you know, you could download, let's say, this original file, but then you could jump over here if you wanted to, jump over here if you wanted to, jump over here if you wanted to, jump over here if you wanted to, and so on and so forth, all without just needing to like pollute your, you know, file system and

stuff like that. What's more, at any point you could also branch out and make additional changes here, however much you want, called, I don't know, new essay. And then you could share that new essay uh with other people. Okay? Or what you could do is you could make the changes here and then you could actually take these changes and then merge them with another pre-existing file to get some,

you know, new better essay hypothetically. Um, you could do that with apps, you could do that with essays, you could do that with everything. People use version control to literally do everything nowadays, research papers and so on and so forth included. So the major place where most version control happens now is on GitHub. And what we do is we've taken this concept of like a

folder or a workspace and we've standardized it into one called a repository. And so this idea of a GitHub repository is very popular. You go into github.com. This is what the website looks like. Okay. And you can see on the left hand side I'm signed in here. I have a bunch of different

like. Okay. And you can see on the left hand side I'm signed in here. I have a bunch of different um repositories. I didn't even realize, but I have a bunch of people here that are like

um repositories. I didn't even realize, but I have a bunch of people here that are like starring my repos and stuff. That's hilarious. Um I have a bunch of different repositories here like worklog make money with make gyro app.1c.copy.com copy.com, proposal generator, and so on and so forth. And these are all basically different projects that I've built. Now,

what's cool is if I click on any one of these, okay, you can actually see every change that I have made to this over the course of god knows how long. This is basically over the course of I don't know 346 different changes. If I click this button, the wildest thing, so I can actually go through and I can see literally every change I've ever made to this thing. And at any point in time,

okay, I can actually open up the details and then the code itself to adjust what's going on. I could

uh restart my, you know, project from here. I I mean, I could do anything. I could share this with other people really easily. Um, and so on and so forth. So, I say this not because I want this to be a comprehensive guide to GitHub. Obviously, it isn't. I just like gave you guys a very high level overview. Um, but in a nutshell, all this is is just a way to store and and and save files.

level overview. Um, but in a nutshell, all this is is just a way to store and and and save files.

And so whereas with our last couple of projects with our portfolio site and then the um app that we just built, I wasn't using GitHub for any of it, from now on, what we're going to do is we're actually going to take our big file structure that we're developing locally and we're going to constantly push it to GitHub so that we both have like a saved version over there if anything

locally occurs, but also we have the ability to um share it with others. And then services that do deployment nowadays like Netlife, Versel, and and other platforms out there, they can often just pull directly from the GitHub. So I don't have to like drag my folder in. I could just say, "Hey, here's my GitHub repo." And then it'll just do all the math and stuff for me. And then I don't even

have to like rebuild it on Netlefi. What I could do is I could just push it to this repo, make a couple of changes, and then Netifi will have like a little hook that automatically rebuilds the site every time a change occurs. And this is how you get like different pipelines set up with like production, staging, local, and so on and so forth. You can also create different branches

branches. I guess I have one here called chest day workout. That's pretty funny. Must have crushed

branches. I guess I have one here called chest day workout. That's pretty funny. Must have crushed that chest day. Um, and then just have agents manage like everything to do with uh with whatever project you have. So, for instance, this is like a little work log that I set up that basically just like a list of things that I've done. I use it to track my own my own work. And uh I developed this

in just a few minutes with uh with claude code I think like two months ago essentially. The

last thing I'm going to mention here is everybody gets a GitHub profile. And so there are a lot of people out there that are have very popular GitHub profiles. This is usually where most open source lives. So, you know, if you develop a really cool new idea or new framework or something, you make a

lives. So, you know, if you develop a really cool new idea or new framework or something, you make a GitHub repository and then you share it with other people and then other people can also make changes and then improve it over time. Um, that's what a bunch of really popular repos tend to do. If

you guys have checked out like the open claw one and and stuff like that, that's where they were getting um most of this this from. And then with agents, what you could do is you could actually just have parallel instances of like 10,000 operating in the background, constantly scanning the workspace and then making micro adjustments and edits in a very interpretable and accountable way. So the future of software development is basically that decentralized GitHub repo pushing

way. So the future of software development is basically that decentralized GitHub repo pushing and pulling and stuff. Okay, cool. I think we've now done enough of like the traditional software engineering concepts for you guys to know a lot more about how to build these things efficiently.

Um, what I want to do now is just talk really briefly about a couple of the different ways you could use agents to streamline your work. I know we touched on this briefly with the repo stuff a second ago, but I just want to zoom out a bit and then just look at anti-gravity and look at some of the the potential and the functionality there in. Okay, so if I just go back to anti-gravity here,

you know, I still have that old site set up. Um, I should be able to clear this just by going to new. Um, one of the simplest and easiest ways to multiply your ability to work on a specific repo,

new. Um, one of the simplest and easiest ways to multiply your ability to work on a specific repo, which is just what I'm going to call our workspace or file folders from now on, is basically just running multiple different separate functions simultaneously. And so, you know, I could say, hey, do XYZ, and then I could just wait until this whole thing is finished. And then I could give it

some more instructions. Hey, thanks. Let's now do ABC. Or what I could do is I could make use of the ability to start new conversations. And I could actually run multiple of these um simultaneously.

So I think we're all familiar with just using the little agent tab on the right hand side. But in

order to parallelize your work and then work a lot faster, what we can do is we can zoom out of a specific workspace and then actually just look at like 3 4 5 10 100 agents working simultaneously for us and then just orchestrate their actions. This can sound pretty bonkers if it's the first time you've done something like this, but this sort of functionality is actually built into

anti-gravity and uh it's also built into things like cloud code and and stuff like that as well.

The way you do so is with this agent manager in the top right hand corner. So if I click the agent manager, what we've done now is we've zoomed out of a particular workspace. We actually have all of our workspaces here listed on the lefth hand side. And you can actually see every conversation you've ever had inside of each workspace as well, which is really handy. So, this one's improving

dashboard UX. This one's listing directories and stuff like that. Here's a search I just said a

dashboard UX. This one's listing directories and stuff like that. Here's a search I just said a moment ago, or I'm pretty sure I just said like do ABC or something like that cuz I wanted to like have a bunch of these that I could quickly jump through. You can see in this case just ask me, hey, what the heck is ABC? What are you crazy? And so on and so forth. This is some other thing that

I've developed here. This is some other thing that I've developed. And so on and so forth.

So, I mean, like, you know, this is kind of cool, right? You basically can just go top to bottom and then see at a bird's eye view a bunch of different conversations that you've had with different agents. And you can do this across workspaces. You can start new conversations across workspaces. You can jump into a specific workspace using the editor, right? Um, and so on. The really

workspaces. You can jump into a specific workspace using the editor, right? Um, and so on. The really

cool thing though is if you go to this inbox in the top lefthand corner, what you can see is you basically get a list of all of the messages that AI is sending you. And the reason why this is so valuable and so cool is because if you make use of the pending feature, which is basically where you don't let AI do something unless you've cleared it, what you can do is you could use this little

pending filter and then just have a giant list of things that like 20 different agents are working on simultaneously and then they're just like serving you um you know the results and asking you, hey, do you want me to do X, Y, and Z? Okay, so let me show you a really quick and and simple example. So earlier I had this website builder repo, right? If I just open the editor here,

example. So earlier I had this website builder repo, right? If I just open the editor here, I had this big Gemini.MD where I was basically showing you guys how to create a website and then I pumped through like two or three of them simultaneously. And I hid this from you at the time because I didn't want you to obviously get super overwhelmed. But if you open the agent

manager, okay, you can see that you can now start new conversations in what's called a playground, which is an independent workspace, perfect for quick prototypes or following curiosity. Then you

actually just paste in this multiple times. So you could start a conversation by going in, paste this in, start another conversation by going in, paste this in, and start another conversation by going in, paste it in. And now in the playground side of things, okay, you now have multiple conversations that are occurring where it'll basically just ask you a bunch of information. I'm just going to say,

um, choose all of this yourself, high-end SAS, for a demo I'm making. You can just paste this in.

You could paste this in. You could paste this in. And then you could paste this in. And what I have now, okay, is I have multiple agents that are all operating simultaneously and independently for me.

This first one here is called cinematic landing page build. The second one here is called building cinematic landing pages. And then you guys can't see these other two, but it's cinematic landing and cinematic landing. And basically what they're going to do is presumably they're going to create different folders for each of these and then build all of these websites simultaneously in parallel.

Right now what I have think about it is I've made one command up here and it's split rather I've made four different commands up here but basically what I've done is I've split and now we have these agents all running simultaneously and inside of this playground I have the ability to like get a highle overview what of what um they're all doing just by mousing through each

okay and you know sometimes you're either going to run into token limits or there's going to be some issue so agent terminated due to error here when this sort of thing occurs you can reply and you can also just use this agent conversation for it to show you more or less like what it's currently working on. So, you know, if I go to inbox here a moment ago, it basically said, "Hey, like what do

working on. So, you know, if I go to inbox here a moment ago, it basically said, "Hey, like what do you want me to do?" That that that was a message that the agent sent to me asking me for approval, right? I can actually just see all these things at a very high level overview just by constantly

right? I can actually just see all these things at a very high level overview just by constantly being on this page. And then essentially all I'm doing is instead of like me being responsible for shephering one agent simultaneously, sorry, one agent through a process, I can shepherd multiple simultaneously. And this is the difference between somebody that's like building one project and then

simultaneously. And this is the difference between somebody that's like building one project and then somebody that's orchestrating multiple projects. You do run into some issues with like context switching, which is a productivity term that basically applies to when you're trying to do multiple things simultaneously or a little bit less efficient at um every one individual one, but it's sort of like monitoring like three or four different CCTV uh uh pieces of footage if

you're like a security guard or something in a mall. You're basically just zooming out. You're

watching three or four of these things and you're stepping in anytime that a particular person needs you. Alternatively, it could be like you're a manager at some big office with a bunch of cubicles that you're just walking up and down the halls. When somebody needs you, they're like, "Hey, you know, Nick, can you help me with X, Y, and Z?" And so, in this way, you're capable of

orchestrating significantly more total output or work than you would be able to do yourself. So,

it's really worth using hotkeys um if you wanted to start building things in this way. And

uh generally speaking, believe it or not, instead of just building one app, I will usually build two or three apps simultaneously now with something like the agent manager and an inbox. and then

I'll just like have them all run in parallel. Um, the reason why is because then that way I could build multiple versions and then I can just pick the version I like the best. Once I

pick the version I like the best, I drop the other ones and then I just proceed with that one. Um,

but yeah, hot keys are pretty important. So you can find those just by mousing over each of these buttons. So inbox is command I for instance, uh, if you scroll down to playground here,

buttons. So inbox is command I for instance, uh, if you scroll down to playground here, you can create a new instance just by holding controlN. And so a lot of the time I'm just jumping between new conversations and then my inbox over and over and over and over again.

Um, you can also jump back to that editor like I talked about earlier just by going command E. This

will jump you into the particular folder where the conversation and kind of work is happening.

So this one's called glowing cosmos for instance. At any point in time if you're operating inside of this playground, you also have the ability to um move this into a specific folder. And so

this is occurring right now in like a temporary folder that uh Gemini and anti-gravity just puts together anytime you do this sort of thing. But you can also just click this button and then you can select a destination folder for all the files in your project. So I could, you know, use the playground to sketch out three or four different ones and then when I find one that I

really like, I could then use the um create a new folder thing to like actually go in add a folder and then just work in like a dedicated workspace. They also have a feature called follow along with agent in the top rightand corner. So if you follow along with agent um basically it'll pull you back in to what the agent is doing at every step and then allow you to see the various

um you know pieces of work that that agent it's worth keeping this page pretty clean. So, I'm just going to proceed with whatever the heck it asked me for. And then over here, now I basically have these two main threads that I'm running. You can see the same thing's occurring back here and then also back here. And although kind of per unit, it'll still take the same amount of time to get a

website out because, you know, this is operating at the speed of um whatever Gemini 3.1 Pro is, if you think about it, I'm technically doing four times the amount of work um simultaneously across all four. I don't usually recommend having more than two or three of these operating. I

all four. I don't usually recommend having more than two or three of these operating. I

just wanted to show you guys how cool it could be if you have four. I actually have five now cuz I'm proceeding with some um agency operation thing I did a while back. Uh just because I find like your attention gets pulled away a little too much. But um yeah, you can see here in the top rightand corner because I'm following this anytime it'll make a substantial major update. I

can actually see the code that it's working with and so on and so forth. I usually don't actually click that though. I just go to my inbox and then I seem you know do you need anything from me? if

there's any specific feature or whatever that they want, then I can I can jump right in. So,

let me run this for a couple more minutes, get a bunch of websites, and I'll just show you what they all look like. Okay. And our landing pages are now starting to um be finished. So,

we could actually access the Vit server. This one's using a different framework called Vit that I covered earlier just by pasting this in. You can see we now have one of the websites. Now, I

should note that this looks pretty similar to the 1se secondond copy website I had set up because uh I think I just asked it to build something that was like very very similar visually speaking. So,

we had that little heartbeat. we have this little thing, but you know, I'm like trying to build it with a particular template, right? So, I'm just going to instantiate a bunch of versions of this template, and if I like them, then I'll go with that. This second one here is done. Um,

because I didn't specifically say, "Hey, I want you to run the server and then open it." You know, this one's asking me to do this terminal command, npm rundev. Um, so I'm just going to have it do it by saying run it and then it'll open it for me and then I can take a peek. Here it

is. Let's copy this over. Paste this in. Cool. And now we have another one called Aether Core, which is very clean. I really like this one. Damn, that's really, really sexy. You know, there are some issues here with some of the fonts and stuff, but hopefully you guys see like I was capable of generating four of these simultaneously. This one here is still under development. As you can see,

there's a hero section and it's scrolled down, but it is running live on a server and it does have that cool little bar up top. And this one here had probably my perfect instantiation or my favorite of like this slow scrolling card like that to me looks really sweet. Um, it's just rerunning it because it's making some additional changes, but yeah, pretty cool, huh? So, you can actually build

multiple apps simultaneously. And in this case, you know, I gave it some pretty static resources.

And I was like, "Hey, I want you to use like this kind of noise layer in the background and stuff like that." You could also just have all of them be different. And the way you do that is you just provide like a prompt that has some inherent randomization. Basically says, "Hey, I want you to randomly select like, I don't know, a background from this online background service."

And then it'll use different backgrounds. Hey, I want you to automatically select a different type of style using this thing. You know, instead of high-end SAS, I just want you to come up with a different one every single time. And then it'll come up with like a 100. So yeah, in this way I've I've uh successfully built something like 15 websites simultaneously at the same time. I

found like the top two or three that I like. I've proceeded with those. I filtered out the ones that I didn't and then I've had like a really really high quality product. And I've done all that stuff in like 10 maybe 15 minutes or so. Um obviously be careful with token usage here because it's always going to be a trade-off between the time it takes to build something and the total cost on your end.

This is just a pretty straightforward money for time trade, but running multiple agents in this way um simultaneously can be pretty cool. Okay, now that you guys know more or less everything you need to know about both modern software development, um, hosting, databases, frameworks, and all that stuff, plus how to use agents to pour fuel onto the fire, let's build product number three, which is a lead generation SAS app that scrapes, enriches, and even queue up

um, the sending of fully automated emails. This is very similar to a structure that I use in production myself in my own business, Leftclick. We work with multi-billion dollar portfolio companies and essentially connect to the outbound systems on a team to help them send emails, scrape uh contact details, and then personalize outreach at scale without needing like a million

bajillion hires in order to do all that for us. So this time, instead of just diving right into the app development via prompt, I wanted to take a few moments to sketch out what an actual app might look like. And there are variety of different names for this sort of thing. Um, in my case,

look like. And there are variety of different names for this sort of thing. Um, in my case, I'm just going to call it planning. You could call it some form of like UX or site design or navigation design or whatnot. In short, um I know for sure this app is going to need a landing page. So here I just said landing page sexy on it. We're going to want some navbar, some main

page. So here I just said landing page sexy on it. We're going to want some navbar, some main value proposition, a social proof section, some how it works section, some case studies, a CTA, and then a footer. This is pretty standard, right? It's basically the exact same thing that we did with Content Orb. After that, we're going to want some sort of login and/or signup page. And so this

is the O form in Superbase where you enter your email, enter your password, and then it signs you up. Now, what I imagine will probably happen after is once you're signed in, um, we'll need some form

up. Now, what I imagine will probably happen after is once you're signed in, um, we'll need some form of configuration page cuz I want this app to be able to be usable by people like you, people that, um, you know, I don't want to have to necessarily build for. Instead, I want there to be a space for your instantly API key, your anthropic API key, your OpenAI API key. Uh, I want you to be able to

configure the prompts that are being used by the AIS to do personalization as well as have defaults and stuff like that. And basically, I just want that to be like your onboarding. It's like, hey, do you want to get started with the scraping? Just enter your API keys here. And there are a couple of other API keys that I'm going to need, actually. But, um, in addition to that, I also

want like brief little one-click guides to show people how to do all of those things. And then

finally, I want the actual scraping page itself, which is just going to be a form where you put in some basic parameters. And the way this is going to work, for those of you guys that don't know, there's a scraping service out there called Appify. And we're basically just going to wrap around Appify. If we can't find enough leads, then we're going to scrape Google Maps. And then we're

around Appify. If we can't find enough leads, then we're going to scrape Google Maps. And then we're basically going to combine both of these into some sort of like enrichment personalization flow. Um,

and assuming that, you know, we've enriched and personalized, which, you know, may not necessarily mean something to you guys if you guys aren't in the marketing space, but I'll run you guys through it all um throughout this demo, then you'll just get all the leads that you just scraped in a simple CSV with some additional column that has AI based personalization. So, we're going to need the

first name and email at minimum. And then I think the last thing to talk about is that orders page or just going to be like a like a history page where you could see all the orders that you've uh scraped and sent before. And then maybe I'll also do plus specific order pages for each that have like I don't know a bunch of descriptions on them. Okay. So, you know, I think uh probably a real UX

designer would crucify me uh in terms of the ways that I've laid all this stuff out, but you know, seems to work pretty reasonable for me. Um, what I do next is I basically just take a screenshot of this and then I always have this on hand cuz you know I want to like know what my app's going to look like. Then I go into anti-gravity and then what I do is I um say something like,

"Hey, I'm making an app that helps people scrape leads. Turn this into a brief description of an app that includes all the important components and I actually just screenshot and I send it to them." This is back when I had it like vertical. I've since made it horizontal. Then scrolling down

them." This is back when I had it like vertical. I've since made it horizontal. Then scrolling down a little bit, you can see we've now changed it into the description. Okay. And then over here we have the updated description with just a bunch of, you know, plain text language here. So,

we're probably going to need more. I mean, like, it's not that big of a deal. Then I made a couple of changes and I said, "Hey, here's some scrapers that I want you to wrap around." Okay. And now my claw code instance has generated this prompt. So, that's good for now. What I want to do next is open a new folder cuz I've copied this and I want to call this lead scraping SAS. I'm going

to create and I'm going to open. Now, in our anti-gravity instance, we have a plain folder here, lead scraping SAS. And so what I want to do next is two things. First, I'm going to need to feed in that prompt. And second, I want to feed in um a description, sorry, an example that we could use to basically inspire Gemini. Now, I went on dribble and I found something that looks like

this. This looks pretty reasonable to me. Um keep in mind like the design and stuff like that is

this. This looks pretty reasonable to me. Um keep in mind like the design and stuff like that is pretty sleek, but obviously they have a lot more components here. Data transfer. I mean, I don't really know why I would ever need a data transfer component, but you know, there's like a bunch of buttons here and stuff. And I think we could make this work. Um, you know, our graph may not look as

nice, although I think we could actually make it look as nice if we really wanted to. But for now, I'm just going to copy this image. I'm going to go back over here. I'm gonna start by pasting that in. Okay. So, we're going to start just by pasting in um this image. It looks like we're copying

in. Okay. So, we're going to start just by pasting in um this image. It looks like we're copying this, but it's not actually making it all the way to our dashboard. It's kind of annoying. So,

I think I'm going to have to take a screenshot of the actual app itself. I think sometimes Dribble does like anti-creenshot protection or something. Keep in mind that we're not stealing this or anything. We're just going to use this as like inspiration. That's all. go back here, paste that in. Then I'm going to say um I'm going to head over to Google, say cold email lead scraping,

that in. Then I'm going to say um I'm going to head over to Google, say cold email lead scraping, and I'm just going to find some links here. Basically, I just want like a brief description of what cold email lead scraping is. So, let me see if maybe instantly has some information on their site. Um, this is like a full endto-end cold email sending platform. Uh, probably not what I

their site. Um, this is like a full endto-end cold email sending platform. Uh, probably not what I want. I just want like some lead scraping. This looks pretty good. I like this. So,

want. I just want like some lead scraping. This looks pretty good. I like this. So,

I'm just going to copy this. I'm going to head back here. I'm going to paste this in. I'll say

this is an example of the sort of thing that we're about to build. I'm going to paste this in just so it has context and so it can write my landing page for me. And then next up, obviously, we need that um prompt that we just copied over. I'd like to build an application. I want it designed according to the screenshot that I sent over. The specifications and the stack is um in the middle.

And then I've also given you a description of another website that does something similar that I'd like you to emulate for the copywriting and content and so on and so forth. Okay,

we're going to stick that in. And uh this is most likely going to end up using like a next.js stack, although I did not this time necessarily want to be opinionated cuz I wanted to see what the app was going to do. Uh when it ends up creating files, it'll do so over here. Keep in mind that we are in planning mode as per usual. So that's what's going on down here. And it looks like we're

using Oh, actually we're using Vit, which is good because that'll give us a the ability to maybe use a different framework here. To be honest, I don't really care about the specific framework, right? We talked about how there were multiple uh in the previous section. So, whatever works

right? We talked about how there were multiple uh in the previous section. So, whatever works is going to work. Um, you know, as long as it's fast and performant. Okay. So, at this point, I'm just going to sit back and let it do its thing. Awesome. So, I just got a notification saying that it's done for Leadzo, which is the name that uh I decided I would give our cute little app. And now,

what I'm going to do is I'm going to say run it. The reason why I'm going to do that is because in order to access this application, we're obviously going to need like some server running at the back end. Our browser is going to end up being the client and then that's how we're going to communicate with that. So, our server is going to be on our computer for now since it's

all local. Let's see how it goes. So, we got the Vit server set up. This is the landing page. Uh,

all local. Let's see how it goes. So, we got the Vit server set up. This is the landing page. Uh,

super clean. I like it. Okay, so we have like some weird spacing here. That's fine. This is

really nice. I like this AI personalization prompt. Very clean. Very clean. Nice. 100

free credits. Okay. So, what happens if I click get started? I go over here, which is nice. Um,

I'm just going to ask it. Oh, it looks like it's actually recording a browser session of me testing this. This is wild. It's Nick Nikki Wiki. Then, Nikki Nikki Nikki. Let's sign up. Okay, we're now

this. This is wild. It's Nick Nikki Wiki. Then, Nikki Nikki Nikki. Let's sign up. Okay, we're now inside. We have some workspace settings on the lefth hand side here. API integrations. On the

inside. We have some workspace settings on the lefth hand side here. API integrations. On the

right, we have some prompt engineering. So, define the rules leader should follow and generating the personalization column for each lead. Cool. Does this actually fill in? Okay, we just have some placeholders for now. What happens if um Cool. So, it went it actually went it found the uh specific API keys and stuff. That's fine. Scrape leads. So, we need a job name, LinkedIn Sales Navigator URL,

max leads, then default icebreaker. I think what we want is basically are going to want to be able to just say uh I don't know like HVAC companies in the United States and then we want it to actually go and find that for us. We're not going to need a LinkedIn sales navigator URL because the appy the specific service that we're using doesn't actually um use that. So, it's going to be okay. Then here

we have some fake order history which looks really clean. We can, you know, open it up in a new window or whatever. Awesome. Awesome. Cool. So, let me just check the bottom. You guys can't see this, but there's a little button that says log out. So, click this log out button. Nothing's

going to happen since obviously we don't have the off set up. Yeah. I mean, like in a nutshell, this is more or less what I what I wanted. Um, anything else that we need? So, new scrape job orders configuration. I think that's basically it. Now, now what we have to do is we basically have

orders configuration. I think that's basically it. Now, now what we have to do is we basically have to test this. Uh, cool. So, what I'm going to do next is I'm just going to run through a couple of these services that we're using just so we're on the same page. Otherwise, I think it'll be kind of intimidating for you guys to see what I'm doing. But in reality, most apps nowadays are just

like wrappers, as in they just wrap functionality around some other app. Of course, you could build your functionality yourself if you really wanted to, and I can help you with that. But in my case, you know, for the purpose of this demonstration, I'm just going to do what I normally do, which is I use a three a thirdparty service called this leadsfinder on a uh which basically allows

you to put in some parameters and then get some leads. So, it generates targeted B2B contact list using advanced filters. Now, this isn't the best lead scraping service out there. I should note that like it's actually quite poor in terms of quality now because uh the leads are cached and they haven't been around for quite a while. So, I use this as an example in Make Your School,

my community all the time. But, let's say I'm scraping some dental clinics in Canada. I want

to scrape a thousand. What I do is I basically just put in a bunch of job titles here. Owner,

practice owner, principal dentist, lead dentist, so on and so forth, and then locations to include, which in my case is Canada, locations to exclude, what sorts of emails I want to get. So, validated,

not validated, unknown. So, I I actually just want validated emails, what sort of company website if I have them. Um, we can use to narrow down the search. The size of the uh resulting company, so 1 to 10, 11 to 20, 21 to 50. the industries that I'm looking in. So, health, wellness, and fitness, hospital, and healthcare. And then which ones not to look for some keywords, dental,

dentist, and then I'm also excluding some down here. Then we have revenue, and we also have some funding. So, let me just make this smaller because I just want to show you guys how this actually

funding. So, let me just make this smaller because I just want to show you guys how this actually works in practice. I just click save and start. And basically, this thing goes on this service, Appify, and then goes and it scrapes it for like some small little piddly fee. So,

it's cooking up some data magic. Uh, let's just wait until we see the very first result, which should be about 100 leads or so. And as we see the first rung here has found a bunch of different leads from specific companies, company websites, LinkedIns, their full names, their job titles, and so on and so forth. This is pretty cool, right? I mean, this is just like a service that I'm using,

and it returns a bunch of leads. And so, for the purpose of this demo, I'm going to assume we're only using like simple services like this. We're not actually rebuilding the wheel. Although,

I should note that you totally could rebuild the wheel if you wanted to. It's just uh, you know, it's not super easy, right? Like, this is really the moat nowadays. It's not the app interface that you build. Sorry, that's the wrong one. Uh, where are we? right over here. Okay, so basically in order to run this, right, logically what we're going to need is we're going to need an API token

and then what'll happen behind the scenes is this Appify API token will plug into this search. Okay,

then it'll use some data with an input like this via API and then it'll find us a bunch of of stuff. And then on the back end, we're going to do is we're going to enrich emails using a service

of stuff. And then on the back end, we're going to do is we're going to enrich emails using a service like this. Basically, not all of the emails that come from this service are going to have

like this. Basically, not all of the emails that come from this service are going to have um like all of the information laid out. So, we can actually use another service called an email finder to enrich that. And then over here, um we're going to pass in either our open AI key or anthropic API key, whatever one works, honestly, and then use that to generate personalized

snippets of text that basically are going to allow us to personalize the emails that we send. So,

hopefully we're all now on the same page. This is a pretty niche service, but you know, the best SASes do tend to be pretty niche and um you know, that's more or less what we're putting together. We also have an instantly API key for one-click campaigns, which are basically where

together. We also have an instantly API key for one-click campaigns, which are basically where we'll just upload the leads automatically. I don't actually know if I'm going to do this cuz the instantly API had a bunch of issues last time I tried, so I might not. And then over here, we have the actual prompt engineering. You know, I want to generate like a highly personalized var

uh uh email, right? I want to say like, "Hey Pete, been following you for a long time. I love what you're doing at XYZ company." because those emails that I send when they're highly personalized like that tend to land a lot better. So here's where you can actually define the prompt that we're going to use inside of the app in order to generate these ice breakers. So you're an expert

sales SDR. Your job is to create a highly relevant one or two sentence icebreaker so on and so forth.

This is this is everything here and the idea is you'll get to change this over time and then you know save and then see your new orders and stuff like that. Okay, so hopefully now we're all on the same page and I've created this demo. This is basically like the vision of the app. What

I'm going to do now is I'm going to go through and just make a bunch of changes. Um, I'm also going to feed in like the API documentations or the services that I want to scrape and use. And

then my agent should do a pretty good job to start. This is great. The Appify scraper that I'm using to generate leads doesn't require a LinkedIn sales navigator URL. I'll give you the Appify API below as well as everything that you need in order to make this request, but you'll have to modify the new Scrape job form to reflect that. What we'll do is we'll pass in a job

name and then we'll have AI convert that job name into a list of filters that work with the specific um Appify scraper that we're using. We also need a way to be able to click into the orders under order history and then open them in sort of a sidebar. Also, right now nothing happens when I click those three little dots or the download button. Obviously, we're going to need to download

these CSVs. Under the configuration section, let's start with the Appify API token up at the top.

Then let's do the Anthropic and OpenAI API tokens underneath. And then let's remove the instantly API token completely and have the any mail finder down below. The idea is going to be our Appify actor is going to return most of the information that we need rather than treat OpenAI's API key as a fallback. Let's just treat it as another option they could go through and then let's

just prioritize anthropic. For instance, if both the anthropic and open AI API keys are filled out, the model should automatically choose anthropic. If anthropic is empty and open AAI is uh present, then we should automatically choose open AAI. And we'll just proceed in that manner. And then

for prompt engineering, I'm actually going to give you a big long prompt that you could use to significantly improve the quality of the output. I want you to incorporate this. Once we're done with the front end, we obviously need to work out the back end and have all these functions available.

So, what I'm going to do is I'm going to create av and then I'm just going to paste in all my API keys for you so that you have them. You can use this as demos to basically test the backend functionality and we could use these and store them um in a static database for now just in like JSON files or or whatever. When we eventually push to our database and use superbase

um then we can make these more dynamic. I think you have everything that you need. If you have any uh questions or misunderstandings or whatever, just give me a shout. Cool.

So now I'm just going to go through and then give it everything that I promised. So the appy API is going to be here. It's going to go right into the app API docs. Now what we want is we want to run the actor synchronously with the input and return the output. I believe return the data set

items rather. So I'm just going to see if I could copy this whole page. Can I copy this whole page?

items rather. So I'm just going to see if I could copy this whole page. Can I copy this whole page?

Sometimes Appify has the ability to copy the whole page for AI. Yeah, it does. So, copy for LLM.

Paste that in. See how long that is? That's super long. Yeah, it's pretty long. And then I also want to paste in the specific stuff about the actor. So, this is the specifics about the actor. Input

schema for actor is here. And then, um, I also promised that I'd feed it in a big long prompt.

So, I'm going to go over to Maker School wrapped, which is massive document that I put together that basically guides everybody through how to write like super high quality cold emails. And then I have a little prompt here that actually you guys could use as personalization. So, what I'm going to do is just going to type personalization and start down at the bottom. There we go. And this

is going to be the prompt which I'm going to feed in right here. Here's a personalization prompt.

For the personalizations, use Claude Sonnet 4.6 or uh uh GPT 5.3. Check out both of their docs.

Okay. And then I think that has everything that I told it that I would give it. I mean,

this is pretty long, right? Just make sure. Okay. So,

I'm going to create av and then um paste in all my API keys for use. That makes sense.

So I'm going to go over here and then just go env. And then I'm now going to go find a bunch of API keys on all the services that I promised it and then just paste them all in. So this is going to be my enthropic API key right over here. Then go apply API key. So I head over to appy, go to my

console. There's always a way for us to grab our API key from whatever service we're using. So I'll

console. There's always a way for us to grab our API key from whatever service we're using. So I'll

go up here to API and integrations. We'll create a new personal API token and I'll call this for SAS app. Should I limit token permissions? Should I set the expiration date? H yeah,

SAS app. Should I limit token permissions? Should I set the expiration date? H yeah,

I'll set an expiration date just in case I forget to delete it. Okay, this one's expiring tomorrow.

That's all good. I'm going to copy this now. Paste that in. Uh I need my open AI AP. Actually, do I need my open APK? No, I don't because I'm going to use the anthropic one. Ah, I suppose uh the other services that I need, I can find them by looking at my Vit app right here. Any MailFinder API key,

paste that in. So, we'll go to any mailfinder, log in. I'm going to go up to the API and I'm just going to copy this token right now. Go back to anti-gravity. Feed that in. And we should now have everything. So, I'm going to press enter. And I think this is now going to be able to develop

have everything. So, I'm going to press enter. And I think this is now going to be able to develop the rest of our app, at least for now. Uh, this is going to be like kind of what we see above the fold. Let me just be smart about this. Don't just paste the prompt in verbatim to the user

fold. Let me just be smart about this. Don't just paste the prompt in verbatim to the user editable section. Obviously, it's pretty long. All right, we've made a couple of changes here. Now,

editable section. Obviously, it's pretty long. All right, we've made a couple of changes here. Now,

we have find me VP sales and practice owners at dental clinics in Canada. I want companies with 11 to 50 employees. That's kind of cool. If we go to orders here, can we actually click on these? Yes,

we can. As you can see, we now get a little sidebar. Um, the sidebar is kind of small, so I'm going to adjust that in a second, but it is still pretty neat. I mean, I can click the download verified CSV button here. So, it's pretty nice. I like this. I really like the fact that we have this little job. It also pumps up so quickly. It just makes it seem really snappy. And

here is the prompt engineering. So, the prompt is just pasted entirely in now, which is nice. Yeah,

it's basically perfect. We do have um what looks to be no training examples, but that's okay. These

prompt variables are going to be injected as the first name to lead, last name of the lead, headline, industry, organization name, location, even their email address. That's going to be cool.

And then we also have our uh our tokens in. So now it's just time to actually give this a try.

So I've just added the API keys right over here as mentioned. And now we're basically good to go. I'm

going to wait for this thing to relaunch the dev server and then we're actually going to test out the flow. I should note that, you know, because we are testing out what is essentially going to

the flow. I should note that, you know, because we are testing out what is essentially going to be the core function of our app, just like with a full stack app, like the probability it'll work on the first try is pretty low. I found it kind of interesting because a lot of people like they judge AI by its ability or inability to do things in one go. uh human beings rarely do things in one

go as well. The difference between humans and AI models is silicon thinks at something like 10,000 times the speed. So you could just try it 10,000 times faster. So you know whether or not this works in one shot is okay. We're just going to go back and forth until it it works reliably. Um and then from there we're going to pump this up to netify just like I had before.

reliably. Um and then from there we're going to pump this up to netify just like I had before.

And then app number two, full stack app number two, but total uh web app number three is going to be completely cool. I've just done this. Now it's storing what's called local storage since of course we're always doing our our first jobs uh or our first check statically. So let me exit out of my cloud API keys. Thank you very much. Go right over here. Just relogged in and then

I'm just going to go scrape leads. So I'm going to say and I imagine there are going to be some issues here. Find me VP sales at dental clinics in Canada. I want companies with 10 employees. Okay.

issues here. Find me VP sales at dental clinics in Canada. I want companies with 10 employees. Okay.

And why don't we do I don't know 200 leads. And then we'll go laconic or lassic. I don't actually know how to say that. Um and then we'll go error executing leads workflow. Check console. I'll head

back to console and then I see that we now already have some issues not found. So what I'm going to do is I'm just going to scroll through this then feed back to our agent. All right. After some

back and forth, it's now telling us it's good to go. I'm not entirely sure if this is true, but we are going to give it a try together. Uh, I think it'll probably be over here. And then I go slash scrape. Find me some practice owners at dental clinics in Canada. One to 20 employees.

Cool. I'll press 100 max leads. We'll run the workflow. We see here it's now doing what it's saying is a search extraction. And it looks like it hasn't finished it successfully successfully because we're immediately getting a return saying it's it's completed successfully, but it isn't. Let me just paste this back. I ran this on localhost 888/scrape returned this

and then I'm just going to paste it in. I'm also going to uh paste in my um input as well just so that I could, you know, monitor this and also maybe have a little bit more meaningful of a back and forth. Um but anyway, let's see what it has to say. just as a form of parallelization.

While this is debugging whatever the appy issue is that's leading to um inconsistent output, I'm actually just going to have it adjust the copy on the landing page as well. So,

let me see here. Hey, this is fantastic. I'd like you to change the copy on the landing page that it's a little bit more geared towards outbound cold emails specifically. Um, also there are some minor graphical issues like the start for free buttons arrow is on the same is on a different level than the text. I'm also seeing that there are four cards under built for performance,

but the fourth spills out onto the second row. Let's do six cards instead. The main value props here are the breadth of contacts, the high quality database, the high quality of enrichment, um the simplicity of the tool, the affordability of the leads relative to most other people. For

the AI personalization section, um under AI personalization prompt, remove the export to oneclick instantly campaigns and then change the language so it's not start for free.

You just start. I'm also noticing that there's no pricing section. Update it so that there is a pricing section. And make sure that everything in the navbar is like perfectly centered. Right now,

pricing section. And make sure that everything in the navbar is like perfectly centered. Right now,

it's a little bit off, or at least it seems to be off. Add a pricing section that is on average 0.05 per credit. Every credit returns one verified email. And then offer some higher and lower plans

per credit. Every credit returns one verified email. And then offer some higher and lower plans um that scale with price. Obviously, when you purchase more, you should get more of a discount. Cool. So, I'm going to pump that in. And then I'll say only modify the landing page.

a discount. Cool. So, I'm going to pump that in. And then I'll say only modify the landing page.

There are other agents currently working on other sections of the website. Do not modify anything that is not the landing page. Also, don't you don't need to rebuild. Okay. So, I'm going to have that operating at the same time as our other tool, which is fixing the appy scraper. And then

I can monitor this just by going back to command E and checking out the agent um kind of conversation here. If I go to under inbox, you can see my two open conversations. There's this one here,

here. If I go to under inbox, you can see my two open conversations. There's this one here, and it looks like we're still building or fixing whatever the specific Appify problem was. Looks

like it has to do with like hash IDs or whatnot. Okay, so this is a good summary of where it's at right now. And then the landing page copy builder is now doing some things. Cool. So,

right now. And then the landing page copy builder is now doing some things. Cool. So,

it's analyzing the landing page. And now it's going to go through and actually write it.

Looks like this search worked now on the uh curl command that it created and it just did this to validate without me actually having to go through and then do it all myself on the website.

It's also reporting the specific issues. So there was some location, some swallowed exceptions and so on and so forth. That's cool. And it also ran the live test and it's asking me to do it again on um you know 888. So that's a different server. Then I'll go what are we doing? Scrape. return

me owners of HVAC businesses in Texas. Okay, we're still getting the zero completed. So, let's go and debug Y. This is my input. Just go into the new landing page update. We've now changed this to six

debug Y. This is my input. Just go into the new landing page update. We've now changed this to six rows, which is cool. This looks kind of silly. So, I'm just going to go back here and say is currently on three lines. The on though the N looks odd. Everything else here does look pretty

solid though. I like that we now have a growth and pricing plan with the same style. 49.99 and then

solid though. I like that we now have a growth and pricing plan with the same style. 49.99 and then 249. Super cool. And I'll just say let's dress up that final CTA card down at the bottom. Cool.

249. Super cool. And I'll just say let's dress up that final CTA card down at the bottom. Cool.

We'll go back to our appy scraper, see how this is going. Just shut over a request here. And it

looks like we are actually doing something which is nice. Um, normally this would have immediately errored out, but it's either hanging or it is doing what I asked it to do. I think this is hung, which is why nothing is occurring. If I refresh this, I think the server probably went down halfway through. The good news is we are populating the database, although either

some design issues have occurred or something is broken. But as you can see here, we have the status, the date, and then the verified emails as well. I'm seeing no problems in the configuration side as well. So, it really is just the scrape leads hangup. What I think I'm probably going to do given that this has taken me like 10 minutes or so just behind the scenes is I'm probably going to

go and just give it a bulletoint list of what it needs to do. Like basically if you think about it um it needs to interpret my request. it needs to convert that into an input friendly JSON object

using um you know like a location table UTC. Then it needs to send the request to um some big long URL which is going to look something like this just with a different appy token.

And then it needs to return to user alongside CSV etc. I also think I might just simplify the number of steps so that all we're doing is the appy search extraction then any mail finder enrichment for now. Um so I'm going to do that next. Just heading back over here. Just going to

paste all this in. I'll say let's adjust the logic to the following. Okay. So I ended up running out of tokens halfway through this build. Let me just show you guys what that looks like and then how you can solve it. So, basically, if you use Gemini 3.1 Pro, that obviously being the most in demand model right now, given the fact that it's, you know, new, really good at UX and stuff like that,

eventually you will probably run into some rate limits. This case, this rate limit occurred after about an hour of this working independently on its own to solve some problem with some rate limit.

I just went and I walked away and then I came back and then I saw that um sorry, with the uh with the app scraper. And so essentially how you proceed from here, at least my recommendation is I would use a different model using the agent chat UX. So I went down to claude opus 4.6. And then

I said first generate a comprehensive prompt that includes everything that we've talked about so far so I can paste it into another version of CC. CC being cla. I'm now going to copy this. Okay. Then

what I'm going to do is I'm going to open this up in claude code. And not only am I going to open this up in cloud code, I'm also going to do something called fast mode because claude has an additional piece of functionality that uh Gemini does not currently possess. That is the ability to go very very quickly. I'm then going to double check my extra usage. Looks like I'm 600 bucks in.

So I'm just going to go extra- usage. Keep in mind you guys aren't going to be spending $600 and stuff on cloud code usage. Why don't I just change this to 700? Um I just use a I use this for like so many different things, right? juggling five or 10 projects simultaneously. So for me, 700 bucks in additional usage might be I don't know an additional 20 or 30 bucks per project.

Then I'm going to set that monthly spend limit. Going to give that a little refresh here. Now

it's up to 86% use. So I have 14%. Okay. And then I'm just going to exit out of this and then go to a new one. I'm just going to paste all this in now. I'll say proceed. And now there will be this little lightning icon down here which denotes that it's in fast mode. And then I get to make use of

um you know claude code or claude opus 4.6 thinking I should say on fast mode while I wait for my Gemini usage limits to come back. Now you don't have to do this. If you don't want to you know juggle multiple models like I'm doing right now. If you're happy to trade a little bit of time for speed then by all means absolutely go ahead and just use like the claw opus 4.6 built into um

the Gemini or agent chat inside of anti-gravity. In my case, I want this to work as quickly as possible since on kind of a time crunch here. I'm going skating with my girlfriend. So, we're going to see how much of this we could do in 15 minutes just using the fast mode. And I'm happy to make that time money trade um as necessary. What you'll see about Claude is it's just significantly I want

to say more verbose with its notifications and the information and it's also a lot easier to follow along. That's one of the downsides of the Gemini series of models, just like a little less

follow along. That's one of the downsides of the Gemini series of models, just like a little less interpretable. Um, the thinking tabs and stuff like that here are basically just in natural

interpretable. Um, the thinking tabs and stuff like that here are basically just in natural language and I can follow along with them almost as if it's me doing the thinking. Uh, which is one thing I appreciate. Obviously, you do have to weigh each of these minor pros and cons against uh, you know, the model's ability to do things like do front-end UX is really pretty and and so

on and so forth. Cool. So, this looks pretty solid to me. We now have the server. It's going to test the API endpoint directly and it looks like we have some internal server error. It's now just going to go through and then update model ids and make minor terminations um as to what the error is until we're we're good to go. And it's telling me that it is currently running an appy actor

run. So I'm going to take a peek at this right here. Looks like we ended up finding five leads,

run. So I'm going to take a peek at this right here. Looks like we ended up finding five leads, which I think was initially what we asked for. Going to head over scrape here and I'll say HVAC owners in Texas. Let's do 100 leads. We'll run the workflow. Looks like we've now generated the filters right down below. So, it's now scraping leads with this poll. And um this is just for I

guess our own our own purposes essentially. You know, if we ever want to modify what the target audience is or our job name, we can do so just by maybe being a little bit more descriptive or maybe being a little less descriptive. Okay, we've now completed the job. We have the CSV over here and I can actually open it and you can see all these leads are now scraped. So,

we were basically like 99% of the way there right before I ran out of tokens. Just needed uh another model to get it over the line. This looks great. Now let's re add the personalization workflow.

Use claude sonnet 4.6 as well. Okay. Now I'm going to do the exact same thing. HVAC owners in Texas.

We're going to test the lead scraping. We can also test the AI personalization as well. I'm doing 100 leads. So this should occur reasonably quickly. Should be another five or 6 seconds. Okay,

leads. So this should occur reasonably quickly. Should be another five or 6 seconds. Okay,

looks like we're done with that. Now we're doing AI personalization. So Claude in this case is generating personalized ice breakers for all of the leads that are in our database.

Something I'm noticing here is the AI personalization is taking more than five or 10 seconds. I imagine this is probably because we're passing 100 rows sequentially or serially.

If you think about it realistically, you don't need to do that sequentially or serially. You

could do that parallel in a parallel and send 100 requests simultaneously, whatever the the rate limits are. So, I'm going to ask it to do that. I'll say batch the requests. Make do whatever

limits are. So, I'm going to ask it to do that. I'll say batch the requests. Make do whatever you have to do to make it faster. Okay. I'm then going to rerun this. We'll go I don't know HVAC owners in Canada instead of Texas. Let's just make sure that lead generation uh filter thing still works. So, this is now Canada. We still have a bunch of size filters down here as well,

still works. So, this is now Canada. We still have a bunch of size filters down here as well, which is cool. Because I'm only doing 20, this should occur significantly faster. We're now

moving on to the AI personalization step. And then at the end, we're now at completion and export. That looks great. We're going to download the CSV. Just going to open this up again. Make

export. That looks great. We're going to download the CSV. Just going to open this up again. Make

sure we have that personalization column. Where is that personalization column? Here we go.

Hey, Jean Michelle. Revolutionizing luxury best in 77 is no small thing. Bane Ultra's legacy speaks for itself. Wanted to run something by you. So, I'm not really liking how this is looking. It's

for itself. Wanted to run something by you. So, I'm not really liking how this is looking. It's

just a little too much right now. So, I'm going to want to make this significantly more casual and cleaner. I'll head back to configuration. Okay, these are looking a little better. Still

and cleaner. I'll head back to configuration. Okay, these are looking a little better. Still

probably not the best personalizations we could be doing, but I think just for the purposes of demonstration, I'll leave it there. Hey Kate, love what you're building at Posh, also in engineering services. Wanted to run something by you. I can see that work reasonably well as an email

services. Wanted to run something by you. I can see that work reasonably well as an email icebreaker. So, let's just exit out of this. We'll close this older one. And uh from here on out,

icebreaker. So, let's just exit out of this. We'll close this older one. And uh from here on out, all we really need to do, if you think about it, is we need to fix this UX problem. Um we need to add authentication with Superbase. And then we need to take this puppy live. So I'm just going to do a big voice dump here and get it to the point where the quality is significantly improved. I'm

going to do that as taking a screenshot of this section. And then coming back to Claude, we'll paste this in. Then I'll say, "Hey, the current app looks great. There's just a few issues.

The order history page looks really squashed and not at all like the rest of the pages. I want it in that nice clean style um similar to the scrape page and the configuration page. We also need to put this live and uh get this on superbase. So I'm going to set up a superbase instance and I'd

like you to assist me in the connection of that. We need all of the fields of relevance including um database fields for the configuration, the prompt engineering, API integrations, basically whatever you've done locally just applied to um you know a database instead. Last but not least,

when you click on an order in order history, it opens up this nice side modal, but it's not very tall at all. I want it stretched out to contain such that I don't have to scroll through um the div containing all of the information. If that's unclear, just let me know and I'll clarify.

I'm going to dump this in and then I'm also going to just because I'm using a new instance of cloud code here. Just going to go back and then I'm going to copy all of this. And I'm doing that

code here. Just going to go back and then I'm going to copy all of this. And I'm doing that because I want to give it context, but I also don't want it to like go ahead and redo stuff on the app ify scrape and so on and so forth. While that's occurring, I'll head over to Superbase.

And then we'll click start your project. I already do have a couple of apps set up. I think what I'm probably going to do is just delete one of these. H probably delete the proposal generator app and then set up a new one just because I think you're only allowed two on a free plan. And um I want to

show you guys how easy it is to set all the stuff up. So just going to delete that. And then I'll go new. I'm going to call this one um let's go Nick J Wellsorg. We're going to call this leadso

go new. I'm going to call this one um let's go Nick J Wellsorg. We're going to call this leadso DB. I'm just going to do a strong password automatically here. Copy that. And then I'll

DB. I'm just going to do a strong password automatically here. Copy that. And then I'll enable the data API. Click create new project. I'm just going to give it all the information that uh it needs in order to set up this database just like I did last time. Okay. So, first thing is head back to anti-gravity. I'm just going to paste this in. That's my DB password. Then

I'll head over to this left hand side here where it says project settings. I'll go project name and then we'll also go project ID.

I think there's one more. We just need the API key so we could do a lot of that work for us. So we'll go secret key.

And then we'll also go superbase public key. We'll copy that as well. And this should have everything that we need. I think what it's going to do now is probably just set up O for us. So head over to authentication where it says email. And this time I don't actually want it to

us. So head over to authentication where it says email. And this time I don't actually want it to confirm the signup. So I'm just going to go back to emails and then where I click on sign on signin providers. I'll just turn off confirm email. That way I can make an account without having to do

providers. I'll just turn off confirm email. That way I can make an account without having to do that back and forth. Great. set up superbase and off. I'll give a bunch of information here. So,

I think this is probably everything that it needs and then we're just going to head over to um SQL editor where it's going to give us a bunch of SQL for us to paste in. Now,

my Gemini usage limit resets just in a few minutes here. Um just because I have all of the context inside of Cloud Code and it's going through and doing this work, I'm probably just going to continue in this Cloud Code thread at least until I'm done this migration.

um then I can start up another agent chat uh using you know anti-gravity's built-in functionality and then have a conversation with it. Uh in general you don't really want to jump around between one model and the next unless you can either fully export the conversation history or you could do some sort of midway summary like I just did a moment ago um from the anti-gravity

to claude or sorry from the agent chat to Claude code direction. If I were to go the other way, I'd do the exact opposite. I asked Claude to give me a detailed project description of everything that is currently occurring and all of its current context. So I could immediately just segue that into um the the conversation with Gemini 3.1 Pro high. Okay, it's given us a plan and I've already

enabled this plan and let it go. So we have the superbase URL, the anon key, service ro key and and so on and so forth as well as a bunch of other information here. It's going to start with the environment variables, give me an SQL migration file, do some client updating, add a bunch of protected routes using authentication middleware, finish the login and signup pages,

have a log out function as well, set up the config page, do the orders page, do the scrape page, um, set up the API layer, and then connect that to Netlifi functions before finally building and verifying. There's going to be some back and forth there for sure. Um, but just like we did this with

verifying. There's going to be some back and forth there for sure. Um, but just like we did this with Gemini 3.1 Pro High, we'll do the same thing here. So, I have the migration right over here.

I'm just going to copy all of this in. And then we're just going to remove these little comments.

And then what I'm going to do is just click run. This will go through and then set up our database. You can now see this in database because we have a scrape jobs table with all of

our database. You can now see this in database because we have a scrape jobs table with all of these fields. The user configs table with all of these fields as well. Any mailfinder key,

these fields. The user configs table with all of these fields as well. Any mailfinder key, system prompt, instantly key, and so on and so forth. And these are all going to be um sort of fed into this authenticated user. So this is what the authenticated user will sort of have access to when they go from one route to the next. At the same time, it's going through and then updating

everything that it's set up to do locally using um JSON and JSL files to work through, you know, API requests to the Superbase PostgresQL server to the Superbase Postgrql database. And this is actually a really good use case of using two different models. The first is to build and the second is to basically spot check what the first model did without full context. The reason why is because

when you don't have the full context, your uh opinions aren't really like polluted by the fact that you're the one that spent all this time and energy working on it. Just like you always have like empirical or peer reviewers in papers and and studies and research and stuff like that. So

too do I recommend doing this with models as well. Having an unbiased third party review our code is what is ultimately going to make our code and our app significantly higher quality. Funny how models are kind of like people in that way. We could theoretically go back and forth and back and forth with Claude Opus 4.6 designing something, Gemini 3.1 Pro High designing something else. Um, but I

think just one of these passes is good enough. And in a way, that's what we're already doing with our security audit if you think about it. Okay, it's asking me to run the migration. I already did. So,

I'm saying done. Let's test it. It's now going to launch this live. And imagine there'll probably be some back and forth just like there was before. Why don't we click get started? I'll say nick sarif nick atniki.com and then we'll go I don't know nikki nikki. Click sign up. Okay, we are now being automatically taken to that config page just like I wanted to. So here is where we'd set

up our keys and then we have that prompt which is automatically set up. That's kind of cool. Okay,

I think what we need to do is we actually need to modify this prompt to make sure it it's actually like being reflected in the end result. Um and then obviously we need a way to stick our tokens in there. So, what I'm going to do for now is I'm just going to go grab the ENV file here. I already

in there. So, what I'm going to do for now is I'm just going to go grab the ENV file here. I already

have my token. So, I'm going to copy this. I'll go this API. Okay. Paste that in. Annie Mailfinder,

we'll paste that in. Enthropic. We will paste that in. Okay. Now, I want to save changes.

Just reflect that this actually works. So, it says saved. If I refresh this, I'm seeing that the state is the same, which is good. If I make a spelling mistake here and save, I'm seeing that the changes are reflecting here as well, which is good. I go to orders, there's nothing. Okay.

If I go to scrape leads now and I say, find me a bunch of HVAC companies in Canada, owners of HVAC companies in Canada, and I go 20 leads, and I run this workflow, is this going to work? So,

it's gone through and it's generated the filters. Let's just see what it's saying here. It's now

scraping the leads. Now, we're doing some AI personalization. And I'm just playing around the UX here. This is nice. This is nice. and smooth. I like this a lot. I also like these cute little

UX here. This is nice. This is nice. and smooth. I like this a lot. I also like these cute little animations and whatnot that it's decided to put in. Okay, job completed successfully. I also like how on the lefth hand side it's renewed. I don't like how this little um scroll wheel animation on completion and export continues. So, I'm just going to head back, turn off the scroll wheel

animation on completed when the job is scraped. When the job scrape is complete, completion.

Okay, that'll be good. But for now, let's actually download the CSV. We got our leads up here. Just

going to take a peek at them. Same thing I did before. Okay, icebreaker is looking great. Love

what Proparts doing in modular construction. Also work in the space. Love the tutor teach model.

Connecting educator students is no small fee. That's reasonable. So this clearly inherited our good um result. Then finally, if I go to orders, we can see this is now populating our database successfully. What happens if I click? Awesome. We have all of the data. Looks really clean. We

successfully. What happens if I click? Awesome. We have all of the data. Looks really clean. We

have the parsed filters. We have the profile scrape. You can actually download the verified CSV here as well. That's clean. Very nice. Okay, the last thing I'd say is this three. These three

dots don't do anything. Also, the three dots to the right hand side of an order in order history do nothing right now. Okay, that's clean. And then if I go down here to log out. Okay. Well,

let's just quadruple check everything else is good. Looks like it. We're back here.

I think it was nikki.com, right? Yeah. Okay, cool. Awesome. And I'm just going to head back out and then test the rest of my routes. So, if you guys remember, there was scrape. Okay, that doesn't work. There was config and there was also orders. Okay,

so all of the off middleware here is working correctly. Um,

how's our landing page? It's looking pretty clean. We don't have payment functionality yet, which I'll cover in a second. This looks pretty clean. If I click start, we go back. Nice.

Also, dress up the footer a little bit more. It's

quite small right now. That's on the landing page specifically.

Okay, this is cool. I like that little like light effect that we got in the background. Real clean.

Real clean. Um, product goes to product. Pricing goes to pricing. Resources. Oh,

there is no resources link. So, we don't really need that. Uh, I suppose we could probably make a cute little logo. So, why don't we head over to asstudio.google.com and just do that while we can. I'm just going to see if I could link an API key. Okay, I need a different account for that.

can. I'm just going to see if I could link an API key. Okay, I need a different account for that.

And over here, let's see if we can link a key. And heading over here, let's see if we can link a key. Cool. Generate me a simple square logo, minimalistic, uh, straightforward,

a key. Cool. Generate me a simple square logo, minimalistic, uh, straightforward, but immediately interpretable and high-end for a lead scraping SAS called Lezo. And then over here, the aspect ratio is going to be 1 one. And we're going to see if we can generate a 2K um, result. I

should also probably find some inspiration logos. This looks pretty good just because it's simple, straightforward, and obviously it's sort of unique. If this gives me a bad result, then I'll say something along the lines of that. No, sorry. Flat icon style. Look at the below for inspiration. Mimic this. Okay. And then going back to our landing page at the very bottom,

inspiration. Mimic this. Okay. And then going back to our landing page at the very bottom, you can see we have significantly more context including the logo, bunch of information down here, and so on and so forth. I've also been told that we should be good. Um, I just sign in here on this little orders panel. This looks like it's opening up something, but it's not showing up. So,

I'll just have to clarify a little bit more what's going on. When I click the three dots, it looks like the menu is being hidden within the div. Then, if I go back to AS Studio, we see we have this. This isn't bad, to be honest. Great. Remove the text. Let's just keep the shape.

Okay. And I don't know if you guys could see this, but at the very top right hand corner, we now have our little custom logo put in. Um I mean like I think this could probably be a little bit bigger. So why don't we make the background color a little lighter gray? Looks good. Why don't we

bigger. So why don't we make the background color a little lighter gray? Looks good. Why don't we make the background color a little lighter gray? Okay. And then if I go to get started, you can see that we now have that little new Leadzo logo. And the colors here match the uh sign up button.

So I mean, is this going to win any awards for its design? Yes, of course. It's it's gorgeous.

No. Uh, jokes aside, you know, maybe I had a real logo designer come in here or maybe I iterated a little bit more on the logo, we'd have something that looks a little bit better. But the rest of it looks real clean. I mean, if I don't know, this was an Nvidia logo or something. I probably think this is like an Nvidia style interface. It's wonderful. Um, so looks great. Let's launch

this thing. Now, because we've done a fair amount of work on Netlefi already, we had to use Netlefi to like do the backend functions or whatever. That was the design um pattern that the agent decided on. This is already on Netlefi. All we really have to do is just change the URL and then create the

on. This is already on Netlefi. All we really have to do is just change the URL and then create the site itself. Just jumping into Netlefi here. There is now a leadso project created a few seconds ago.

site itself. Just jumping into Netlefi here. There is now a leadso project created a few seconds ago.

Um that is manually deploying. I don't want it to manually deploy. I just want to show you guys how you can link it with GitHub. So I'm just going to pause this and say set up GitHub as well and then link the two. And so this now apparently is online. If we go here we have leadzo.netifi.app.

So this is actually on like a real URL. So we could see up top. Um, I think this might have made the uh logo a little bit brighter than I was initially anticipating, which is cool. But

remember that I want this to be um, you know, on GitHub as well. So, that's what we're going to do next. First, it's going to initialize the Git repo. It may ask you to sign in if it's

do next. First, it's going to initialize the Git repo. It may ask you to sign in if it's the very first time you've done this before. I've done this many times before. So, my um, anti-gravity instance is basically already linked to my specific GitHub account. It's now going to do what's called git ignore, which is take a bunch of these files that probably shouldn't be pushed,

like all of my API keys, then ensure that those don't actually go live. Now it's creating the actual thing and then linking it to Netlify. It'll handle whatever errors it has in its own syntax mostly autonomously. Just checking for mobile optimization as well by making my browser window a

mostly autonomously. Just checking for mobile optimization as well by making my browser window a little smaller and then dragging it all the way to the left. This looks pretty clean to me. I don't

see any major issues. Nothing so far. Nice. Cool. All of these are arranged the way they should be. Pricing. Excellent. Okay. Get started today. Beautiful. Now, how about the actual login page?

be. Pricing. Excellent. Okay. Get started today. Beautiful. Now, how about the actual login page?

Yep, that looks good. Then how about Nikki? Nikki is the password. Okay, so the actual app page not super mobile optimized. Everything else is. So what I'm think I'm going to do, which is my final command essentially, is excellent. The landing page and a sign-in pages look great, but the um

dashboard stuff after you sign in is not optimized for mobile. Make sure that it works on mobile displays as well. And while all that stuff's going on, I'm also going to do our security audit.

What's cool is I could do a lot of these things in parallel side by side. So whereas previously I had Cloud Code do the security audit, I'm not just going to paste this big security prompt into Gemini 3.1 Pro High for a couple of reasons. One, I've already used like $800 of my Cloud Code limit at this point and I don't want to spend anymore. Um, another is that the Gemini model uh rate limit

runs out at a specific time and then like it's usually back within an hour or so. I think they do it like every 2 hours or 3 hours or something. So yeah, I just uh Oh, and the third is I just want to test how it is compared to the Cloud Code experience. So, we're going to allow this whole conversation here and then it's just going to run through top to bottom and do that security

audit. Um, what's cool is now we're pushed to GitHub, right? Because we're pushed to GitHub,

audit. Um, what's cool is now we're pushed to GitHub, right? Because we're pushed to GitHub, we can actually do a lot more of the um kind of like uh version control based security things that we couldn't do that last time because it was more of like a because we had just dragged and dropped the folder directly into NFI. So, it looks like it's doing pretty well mapping out the front end

and backend LFI functions entry points, checking ignore for secret management. I'm just going to let this go on its own and then uh along with the designed components and stuff like that, we can get to that um when it's all done. Heading back to the app, which is now online, I'm actually just going to do one final mobile optimization check. So, that looks really nice and solid. I'm now

going to sign in. We'll go nickniki.com. And then I think the password was like Nikki Nikki. Um this

new scrape job here is looking really clean. As you can see, we actually have that functionality.

Let me just move my head. We actually have that functionality now where all of it is contained within like a mobile browser um view which is really cool. And then we also have that little navbar. So I'm going to head to orders. Orders you know it's going to be a little tougher by nature

navbar. So I'm going to head to orders. Orders you know it's going to be a little tougher by nature I think but uh included this little horizontal scroll wheel. And so I'm still technically going to call that mobile optimized. I guess we could just like redo the whole structure and have job ID here, target request here, profile scraped here, but it'd be a little bit annoying to do

that. And I kind of like having a table. Tabular data is um notoriously different to turn into like

that. And I kind of like having a table. Tabular data is um notoriously different to turn into like mobile optimized form when you're working with tables and HTML. So I think I'll just leave that there. This page looks really clean. I really have no issues. Um I'm I'm honestly quite pleased with

there. This page looks really clean. I really have no issues. Um I'm I'm honestly quite pleased with the performance of Gemini and Claude Code together on this app. So 10 out of 10 would do again. Um,

we do have one more feature I guess which is that feature that I talked about earlier where um, you know, if it doesn't scrape the leads through Appify, uh, sorry, the Appify codec crafter actor, then I wanted to pass that off to Google Maps. Uh, I think for the purposes of demonstration, like we're pretty close to just wrapping up the app. And the purpose of this was not to do like

some super crazy endto-end uh, like 500 different platform scraping flow. The purpose is to show you guys how to wrap around an API and how simple that is. So, I think I'll probably just leave that as that actor for now. But uh rest assured you could very quickly and easily weave in uh you know logic like hey if this thing returns zero leads then I want you to use this other approach. Um yeah that

looks pretty good to me. I guess we could also add that post any mailfinder step. H I might just do that instead once we're done the security audit. Um generally speaking though you do want to do the security audits at the very end. So might be skipping a step here. Not that big of a deal. Just

wanted to make sure we're all on the same page. On the security side, if I just open up this agent window, you can see that it has actually found some major issues. Found major off bypass in the API routes. It also found a hallucinated enthropic package dependency. So, it's preparing some final

API routes. It also found a hallucinated enthropic package dependency. So, it's preparing some final checks. That is a big deal, right? Um, you know, it's done more or less exactly what I've asked it

checks. That is a big deal, right? Um, you know, it's done more or less exactly what I've asked it to do. Go through with a fine tooththed comb and see whether or not we can access routes without

to do. Go through with a fine tooththed comb and see whether or not we can access routes without actually having any sort of credentials. I can open up the task right over here. And, uh, this is where we're at. The first phase was where it was just identifying and running through the codebase.

And the second is now where it's running through every single step here sort of like a tabular way.

It's now finishing up the report generation. We're going to take a look. So this looks like it's quite critical. We have authentication bypass and paid API routes, some hallucinated malicious package dependencies, missing with check clauses and so on and so forth. So, what we can do is we can actually go through this whole thing and not have this hallucinated anthropic package,

but instead use the atanthropic-ai- SDK. So, I think what I'm going to do is we're probably just going to push it. Okay, great. Do the security fixes, make sure the app still works, of course.

And now we're going to run through this big list of detailed findings and fix it. Of note, this is significantly less secure than u the other app. just off the get-go. And it's probably because we have some additional functionality where we're basically like piping through API requests and whatnot, right? We're also using a slightly different framework. We're using Vit instead of

Nex.js, which I think solves a few of these. Um, in total, I think the score is like something like 70% or so, whereas the previous app, I think, was a little bit higher. But yeah, you know, some of these are quite quite severe. The fact that you could bypass um the authenticated user.

So if they're not authenticated, it skips the check entirely and proceeds to use the fallback process API keys to execute the scrape. Any visitor can hit this endpoint via curl or postman without authenticating and your server will gladly run expensive API ampy jobs, open a analysis or anthropic calls all build to my personal account. This is the same sort of issue that um I think

there was with OpenClaw at the time where um you know you could just like bypass one of the routes entirely, go on like their dashboard and then if they had some little server bypass uh setting or flag not like explicitly opted out of then you could actually just use their own keys. And so in this way a lot of people had their keys used not only leaked but also used and run

keys. And so in this way a lot of people had their keys used not only leaked but also used and run up something like 25,000 people. It's yeah quite a big deal. Looks like we're now installing some input validation libraries and stuff like that and it's fixing the bypass. I'll get back to you guys when all this stuff is done. Excellent. Looks solid. We now have everything that we

need. I'm just going to take a quick peek at the final version of the app. Make sure everything

need. I'm just going to take a quick peek at the final version of the app. Make sure everything here works the same way that it did initially. Opening up another list here. And this looks solid. Excellent. So hopefully you guys now see how you guys could use Gemini in conjunction with

solid. Excellent. So hopefully you guys now see how you guys could use Gemini in conjunction with cloud code and anti-gravity to build an app not only that has full stack database authentication, everything else, but that also wraps around like a pre-existing API. As mentioned, a lot of fantastic um SAS apps nowadays will either incorporate a wrapped API as like their main functionality or

they'll like include this as one of the five or 10 or 15 different things. Realistically,

like the software is no longer the moat. It's not really that like, you know, you're going to build something super incredible that solves a problem that nobody else has ever solved before and then you're going to package it in a beautiful UX that nobody has ever put together before and then, you know, put it on the internet and then that is what is going to distinguish you out from from somebody

else. And so in this way, you know, there are a lot of short-term opportunities you could take

else. And so in this way, you know, there are a lot of short-term opportunities you could take advantage of through app creation just by wrapping pre-existing APIs that already do most of the heavy lifting for you. And hopefully this Appify example um was was a a good show of what that might look like. And by the way, just so we're on the same page here, this is just one tiny little

actor of like thousands of different scrapers that you could use. Just scrolling through Appify here, you guys see there's stuff like uh Trip Advisor review scraper, DraftKings Scraper, there's Instagram scraper, website content crawler, tweet scrapers off Twitter, land.com search, Instagram comment bots, and so on and so on and so forth. You could build whatever functionality you want just by wrapping them around this service, which is quite affordable um and you know,

straightforward and easy to use. And there also a bunch of other services out there that are like this that do um similar things. So, I'm not going to tell you how to use one service or another, but yeah, like this Appify or API wrapper game is super super powerful and it's blowing up right now. The one thing that we didn't build today, obviously, was the payments integration, which is

now. The one thing that we didn't build today, obviously, was the payments integration, which is sort of like that final missing piece. Um, so I'm going to talk a little bit about payments now and then after I'm done talking about payments, we'll actually go through and build our next app, which is going to be one that allows us to go uh allows users that use our app to go from everything from

like going on a landing page, clicking buy, buying the product or service, having some tokens added to their account, credits, and so on so forth, going through like a full-fledged onboarding, and then once the onboarding is done, basically being able to use the app. And in this way, we've successfully built up both our understanding and then our capability from plain old websites to

um what will finally be like full stack apps that combine everything that we've talked about here.

Okay, so let's have a brief conversation about payments. We've obviously set up authentication.

We know what like the the general flow looks like. When somebody signs up to your app, they can either get some sort of email notification that they can verify after they're done with that. Then obviously they get they get access. A lot of this is handled through authentication

that. Then obviously they get they get access. A lot of this is handled through authentication middleware and routes and stuff. Um, but basically in our case with payments, we're going to add one final step. So, basically the user is going to start by signing up, right? So, we already know

final step. So, basically the user is going to start by signing up, right? So, we already know how to do this. It's pretty straightforward. It's off. After they sign up, they're going to be taken to their own private payment page where they can pick a plan or buy credits. Now,

if you're doing like a thumbnail lead gener a thumbnail generator app, for instance, obviously it's probably going to be credit based. Um, if you're doing something that maybe provisions access to like a subscription service or something where it's like, you know, you pay once and then you do it monthly, then we'll probably do a plan. um after the payment occurs, they'll get access, which is referred to as entitlement. They'll use the app, which is called consumption,

and then in some cases, like if you're using credits, they may run out, in which case they go back to the payment. That's sort of how it looks under the hood. In terms of like what's going on, um we're not going to do the payment processing ourselves. Basically, everybody on planet Earth now just uses pre-existing options like Stripe. And the whole idea is when a user clicks subscribe

or buy credits or whatever um we just have an agreement with Stripe where via API we redirect them to a Stripeh hosted checkout page. Stripe already has all the language and handles the card.

They do things like advanced fraud detection. They do things like you know handle your tax obligations like receipts and stuff like that and then they just send all of that stuff to the user.

We never touch a credit card number. We just get paid you know in return for doing this. Stripe or

these other payment processors they usually make like a couple percentage points. I think Stripe right now is 2.9 plus 30 cents per transaction or something. Um, I'm very happy to pay the 2.9 cents not to have to deal with this because in addition to this being like a real cluster, you know, don't want to swear too much on this, but in addition to being a real pain in the ass,

uh, it is also kind of like a liability legally. And, you know, as app developers, I want to focus on building the app and marketing it and stuff. That's what 99% of my work needs to be, not handling the legalities. So when the payment succeeds, and it will if you know the the card is not fraudulent, if they cross their tees and dot their eyes, Stripe will send our backend a

web hook, which is basically just like an event notification that says, "Hey, this user paid, this user that you've already signed up for." So we have all their information and so so on and so forth. Their ID um is good to go. Then your backend will receive that. It'll update a field on the user's record in your database. So in our case our superbase that'll be something like plan is

now pro or credits are 50 and then your app knows what it's allowed to do and then you know as it uses and consumes those credits every single time it'll basically make a request to the database just reducing that a little. Um and then you know because it's like this you can now do a variety of of cool features. You could provision additional app um credits or usage if you want. You have the

ability to like upgrade people, downgrade people, moderate your app and everything.

So, three models are onetime purchase, which is basically where you pay once, you get access forever. It's really easy to do. You're basically just selling a service, right? So,

access forever. It's really easy to do. You're basically just selling a service, right? So,

you just flip a boolean on their account. Um, they sign up via the Superbase O function. Now, they

have like a little like user table. Inside the user table, there's a field that says subscribe, question mark, and then it's either true or false. In subscription, it's pay monthly and then the access continues. Stripe has a bunch of features inside of it that manage recurring subscriptions

access continues. Stripe has a bunch of features inside of it that manage recurring subscriptions or billing um on let's say a monthly or a weekly or an annual basis. And basically what happens is once you have the payment success or payment failure um you'll receive a web hook and then you just toggle that access and then Stripe will manage that for you every single month. Basically

uh whenever a a successful payment comes in, you'll keep it. If a payment failure comes in, then you'll flip it. And then finally that credit based usage where you basically just buy a bucket of different um tokens or credits or whatever the heck. every time they hit your API to generate a thumbnail or scrape your leads, you decrement the balance. When it hits zero,

you will send them back to checkout and then force them to do it again. So, all of the apps that we built in this course can use any of these. Uh, if I was doing lead scraping, I would probably do either like a monthly plan with credits built in or I just do credits. Um, for

our thumbnail generator, we're just going to do credits. But, you know, you you can use whatever combination of these you want as well. The three things we're going to need in our codebase, and keep in mind like our models are going to handle this for you. You don't have to do this, but basically we need an endpoint that creates a Stripe checkout session and then redirects the

user. So after the user signs up, they're going to have to immediately go to this endpoint maybe with

user. So after the user signs up, they're going to have to immediately go to this endpoint maybe with three maybe a page with three different pricing plans or something. Then when they click on that, it'll redirect them over to Stripe with their information. Then we need a web hook endpoint, which is just like a little um route on our server that basically waits to receive a payment

succeeded event from Stripe. Then it'll update our database. And then finally, we need some way to check inside of our app before doing the expensive thing like generating a thumbnail or whatever, does the user have valid uh plan? Do they have valid credits? So that's exactly what we're going to do in the next product build. You guys are going to see this hands-on. I just want you

to know that basically this just stands between like the authentication step, okay, and then the um like usage step. Basically now there's just going to be an additional one which is payment.

Before obviously I let people use their own API tokens and stuff like that in the app. So we sort of bypassed this alto together. Now it's going to be you know like us doing the thing and therefore we're going to want to make some arbitrage. You know they're going to pay I don't know $10 and then every usage is only going to cost us $1. And so in that way we're going to basically make uh $9

in profit. That's more or less how any meaningful SAS business will operate. Okay. So hopefully you

in profit. That's more or less how any meaningful SAS business will operate. Okay. So hopefully you guys are as excited as I am. Let's dive into it. So, in order to make any of this work, you are going to have to go to stripe.com and set up an account. Um, I want you guys to know that if you don't have, you know, like an account on Stripe set up, you're not really going to be able

to follow along with me. But, at the same time, I know that depending on where you are in the world, um, different people have different levels of access to Stripe. They're not available in every country. So, if you guys aren't capable of using whatever, you know, the specific solution I'm going to do, I recommend just use whatever you guys have access to. Like, there's Payaneer,

uh, I don't know, there's like PayPal. While these services are not as clean and as good as Stripe, they don't handle as much of, you know, literally global GDP at the moment. They're up to 1.6% which is insanely bonkers. Uh they're still pretty solid and, you know, there's a lot you can do with them.

Just trying to replace everything I'm about to tell you with with that. So, you're going to have to go through some prolonged signup process obviously and some of the stuff is going to take a while to implement. You're going to have to, you know, verify your identity and stuff like any good payment platform. Um, but this is really clean and it's it's a really good service. After that,

payment platform. Um, but this is really clean and it's it's a really good service. After that,

you'll be taken to a dashboard that looks something like this. in the top right hand corner there'll there'll be a little test mode toggle which I'd recommend turning on. If you

head to the top lefthand corner you can then go switch sandbox and then click create sandbox.

That's what we're going to do. Um when you go through that little prompt uh create it or model it after you pre-existing Stripe account and then you'll have an account that looks like this which basically will just model over your real account and then give you the ability to like collect u publishable keys or secret keys at a button. Make sure not to reveal these.

These are super important if you did reveal like your your real keys, not your sandbox keys. Um,

a developer would basically have full access over literally everything ever, which is kind of crazy.

So, don't ever do that unless you want a random $10 million bill in your Stripe account. They'd

probably cap it after a few thousand, but yeah, would not want that to happen to you. And then

once you're done with this, you're you're actually pretty good. We're just going to give our agent the publishable and secret keys, and then it'll like handle the rest of the payments for us. Okay,

so that's step number one. Step number two, I'm just going to go back to anti-gravity. And then

now, let's exit out of this lead scraping SAS. go open folder and I'm going to call this thumbnail generator. Open this puppy up. And now we are basically in a fresh uninitialized workspace

generator. Open this puppy up. And now we are basically in a fresh uninitialized workspace here with just the folder name. And just like we did the first couple of times uh to develop full stack apps. We're going to do more or less the same idea. I'm going to go find a screenshot of

stack apps. We're going to do more or less the same idea. I'm going to go find a screenshot of something that I like that I think looks really clean and that I want to model my app around.

And then I'm just going to like voice dictate give it a big dump of what it is that I want it to do. And then I'm just going to have it like go and give me its demo. Um, once we have that demo,

to do. And then I'm just going to have it like go and give me its demo. Um, once we have that demo, we can like in that little mining gif, uh, or sorry, mining meme, we can like progressively mine all the BS until eventually we hit gold. And once we've hit that little gold cavern, then we can actually do some work and make our app better and better. Um, at a very high level

though, uh, let me show you guys how I'm thinking that this app is going to work. So, basically,

um, just like we had before, you know, we want a landing page. That landing page is going to be like any relatively simple marketing page, right? What's going to occur is there'll be a little payment section. When they click on this payment uh button or whatever, basically what's going to

payment section. When they click on this payment uh button or whatever, basically what's going to occur is they'll be taken to the authentication or a sign up. Um after they sign up, they'll be taken to the ability to pay and that'll be like the one click that takes us to like the Stripe checkout. We're going to do this based off credits. So after they pay, we'll then provision

Stripe checkout. We're going to do this based off credits. So after they pay, we'll then provision access to the app. What's the app actually going to look like on the internal side? Um well,

it's going to be pretty straightforward. You're going to have a dashboard which allows you to see all of your generated apps, uh, sorry, generated thumbnails and everything like that. You're

going to have like a config page similar to the scraper that allows you to do things like upload images of yourself. Um, when you upload images of yourself, uh, you'll be able to basically have the model generate thumbnails for YouTube or other uh, content platforms that include you. Uh, and then we're also going to have like the generate page. And this generate page is where we're going to

be able to, you know, put in some some prompts and and stuff like that. and then it'll pass through. And the idea is what we're going to do is we're going to pass through using nano banana.

through. And the idea is what we're going to do is we're going to pass through using nano banana.

And the way it's going to work is we're going to feed in um like an inspiration thumbnail. And then

in addition, we're also going to feed in a prompt with changes. And then it'll do its best to model that. And it's not just going to do it once, it's going to do it, I don't know, like three times.

that. And it's not just going to do it once, it's going to do it, I don't know, like three times.

And then it'll spit out, you know, three potential options, A, B, or C. And then you just pick one.

And this is going to be the one that gets saved. This is going to use our Nano Banana Pro key. And

so in that way, it's going to be consuming our app credit usage. Um, we're not going to go through the process of like signing up a developer app or anything like that to to let that happen because sometimes some of these platforms are like, hey, if you want to resell our tokens or if you want to resell credits, you need to go through some additional steps. Um, but basically,

in a nutshell, that's going to be your completed one. And then this is going to show up in orders.

And then every single time we do that, if you think about it, we're also going to um consume some credits that they have because they're buying based off of credits. So I don't know, maybe every time we generate we'll consume three credits and then I don't know, maybe like it'll be like $1 equals 10 credits or something. We'll keep it really simple obviously, but if you were

a business, you'd actually want to run through like the economics of pricing and stuff like that.

Okay, so pretty straightforward, pretty simple. Um why don't we start with that first step which is finding some design inspiration. Then I'm going to do a big voice dump. After we're done with the voice dump and the design inspiration, we're going to produce it locally. Once we produce it locally, we'll iterate test. Then we'll push it um to like actual databases. We'll iterate test. Then we'll

make it live on Netlefi. Iterate test. Then finally, we do a security audit. Same thing

that we did before. Just going to head over here and I'll type web app because a lot of these are mobile based and I just want this one to be not mobile based for now. I want this to be really clean. In fact, I want this to be like the cleanest, sexiest app that we've developed so far.

really clean. In fact, I want this to be like the cleanest, sexiest app that we've developed so far.

So, I really like this design. That looks really clean, but obviously it's not like a like an app, per se. I also really like this design. Okay, that's really sexy. I'm liking this like dark

per se. I also really like this design. Okay, that's really sexy. I'm liking this like dark kind of like glass. I don't know what it's called. Isomorphism. Like, this is crazy. Activating new

brain paths. Look at how sexy that is. So, we're going to go over something like that.

This one's really, really good. This guy Jack R is a freaking genius here. He actually included the font down below as well as the color palette and everything like that. Um, this is for like some app that supposedly monitors your brain waves, which is wild. Uh, we're obviously not making an app that monitors brain waves. We're making an app that uh gets me more subscribers on YouTube,

but still super clean. I like this. And the fact that he provided the fonts and stuff means that I'm going for it. So, I'm just going to take this image here, copy it, paste that into thumbnail generator, and then I'm also going to feed in just some design information. I'll say font lufka

um primary F4 E18E secondaries, and then I'll go D6, D6, D5, and then D. Is that a B or an eight? I

think that's a B. DB DB DB. Uh, anything else that we need? We also have the white is going to be E3 E3 E3 and then the black is going to be 043. Cool. I'm just copying these over. I mean, obviously I could just provide a screenshot, but I don't want to consume that many tokens for what ultimately amounts to just a few characters. Um, cool. This looks really, really clean. I I like this. So,

we'll see how this goes. I mean, I don't know if it'll be able to replicate the glass eomorphism, but that's fine. Um, and then we'll close out of these for now. Now that we're done with that, I'm just going to give a big voice dump of more or less everything I've already told you guys. So,

I'm not going to include this in the video so you guys don't have to waste another few minutes hearing me talk about it. But, I'm just going to go back here, double click my voice transcription tool, and then go for it. Hey, I'd like you to help me build a full stack application. I will

provide you with all the relevant API keys down here for now. Build this so it works locally using JSON files as a standin for the DB. Later we'll do the actual superbase etc setup. Cool. That looks

pretty good. Um quite the long prompt here. That's one of the reasons why I really like these voice dictation tools. You can just bang out, you know, 10 times the number of words. And what's cool

dictation tools. You can just bang out, you know, 10 times the number of words. And what's cool is models are pretty capable at extracting your meaning. Better just to talk like you're talking to a human being. Spit out whatever you can and then the model will extract the important bits. So

that's more or less what I did over here. It's now going through this. It's generating um you know, a file structure using uh next.js, which is what I asked it to use. Um and then, you know, I'm going to give it all the API keys and everything like that after it's scaffolded the base structure. Okay. So, from here on out, we're just going to sit around and wait for this thing

base structure. Okay. So, from here on out, we're just going to sit around and wait for this thing to do its magic. Awesome. So, it just wrapped up and I now have this live on npm rundev. I then

navigate localhost 3000 and this is what it looks like. So, this is unfortunately just calling it nano banana. I think it probably misunderstood what I was saying, but that's okay. No big deal.

nano banana. I think it probably misunderstood what I was saying, but that's okay. No big deal.

Just going to refresh this here. See that we have a bunch of the social proof pieces here.

Global tech nexus, Nebula, and so on and so forth. Professional thumbnail. Zero Photoshop

skills required. That looks pretty clean, honestly. Simple, pay grow. Pricing. I like

that. Ready to blow up your channel. Create your first thumbnail. Okay, so let's see what happens when I do get started. Takes us to this page. I'll just say nikki.niki@gmail.com. Continue with

email. Now we're being taken to a payment page. This is really clean. I like this. Um hm. Going

to click pay $10 here. It's empty, but we should still be good. And now we're on the thumbnail uh generator side. So look at this generation activity. Number of thumbnails generated per day.

No generations yet up here. Generate new will take us to this page. And we actually have a pretty clean UX. We have a generate magic inspiration thumbnail. Generation prompt generated options

clean UX. We have a generate magic inspiration thumbnail. Generation prompt generated options 1 2 3. These are what are going to generate. We have the number of credit cost. We have a settings page here with a reference face. We're going to need multiple files. So I'm going to have to make that adjustment. And then you guys can't see this because my face is in the way,

but if I make this a little bit smaller, you see how on the bottom left hand corner, we also have a credits available with a top up button. This top up button is going to bring us back to this little payment page. Okay, so it's really clean, very sexy, and pretty straightforward app. That said,

payment page. Okay, so it's really clean, very sexy, and pretty straightforward app. That said,

I don't like the design. The design is sort of like a big issue for me. So, I'm going to have it generate um a new design because I don't like this. There are also some minor changes that I think need to be made. Notice how the margin on the left moves around every time. Obviously,

we have some minor UX changes as well, aside from the design that I like to make. And uh yeah, why don't we pick a name? Why don't we call it Thumbly? I think this is actually the the name of one of my startups now that I'm mentioning it. It used to literally be called Thumbly, and it was something similar. I was like creating uh thumbnails for people. Oh yeah, look at that.

That's wild, man. I made this thing like probably five, six years ago. That's a friend of mine, Zach, that since worked with Scaling with Systems and a bunch of other people. Anyway, super clean, huh? Not gonna lie. Okay. Okay. This is how it works. You basically basically generate

huh? Not gonna lie. Okay. Okay. This is how it works. You basically basically generate thumbnails and then you can select them. Man, I coded this by hand back in the day. Uh, okay. So,

let's call this thumbly. And then let's also make a bunch of changes. I'm just going to do some voice dictation. And then I'm also going to like have it really push for that high-end white design style cuz I don't like this first demo. So, I'm going to say let's call it thumbly feedback.

And now I'm going to give it a bunch. The design needs to be heavily modified. It does not reflect the provided image at all, unfortunately. On the overview page, I'd like you to remove the average CTR impact section and then replace it with something else that we would realistically have

access to. The generation graph looks cool. When I go between overview, generate, and settings,

access to. The generation graph looks cool. When I go between overview, generate, and settings, I'm noticing that the left hand margin of the generated of the um elements on the right hand side are slightly off. I just want you to fix them all so they're the exact same width. On

the generate tab, auto prefill the generation prompt with the user's templated prompt. Add

a section under inspiration thumbnail where I could just paste an image URL and then it goes and automatically populates it. Under settings, we'll need to upload multiple reference faces. So

have a ability to upload more than one, not just one. And then in the default prompt instructions, this is where you'd automatically insert some generated prompt in the generate page. So

whatever the user writes here, I want reflected in the generate page by default. And then the user can modify that slightly as necessary. On the landing page, remove all references to nanobanana and replace with thumbly as mentioned. Add more social proof here because we're running out of them pretty quickly as the business names scroll to the left. Make the website landing page around

twice as long in general. Finally, I'll say the app needs a major redesign. Focus on the light theme as provided in the images above. Ensure you're using the right font etc. We want light,

not dark. Soft glows and futuristic glass style aesthetics. Cool. I'm now going to give it some

not dark. Soft glows and futuristic glass style aesthetics. Cool. I'm now going to give it some more time to make the required changes and then I'll check back on the app. We're at the next leg of that redesign. So, I'm just going to take another peek at localhost 3000. Well,

it's definitely looking a lot brighter, which is nice. Kind of weirdly yellow and green, which I don't really know how much I like. Uh, let's go to the dashboard. Ooh, this is much better. Much

better. I see that it's taking the inspiration more on the actual dashboard side of things than it did on the landing page. And that's okay. Okay, cool. It also fixed that margin issue that we had earlier. Um, I actually really like this. I'm just going to zoom in a bit. Okay. I think what we need

earlier. Um, I actually really like this. I'm just going to zoom in a bit. Okay. I think what we need to do is we need to just widen it a bit. So, I'm going to do the same thing. Hey, this looks much better. Could you widen the um elements in the dashboard, the generate page, and the settings

better. Could you widen the um elements in the dashboard, the generate page, and the settings page? I feel like they're not very wide right now, and that just looks silly. Um also, what font

page? I feel like they're not very wide right now, and that just looks silly. Um also, what font are we using? Are we using that provided font? Some of the colors are a little too light now, I would say, like the highlight uh color on the left handmost navigation elements. That

light green or whatever it is, that neon color is a little rough. So, I think we're probably going to have to reduce that just for contrast purposes. Um, are we using real glass isomeorphism here? If you don't know what that is, um, I can provide significantly more context. Anyway, uh,

here? If you don't know what that is, um, I can provide significantly more context. Anyway, uh,

we do have some major issues on the landing page side of things. This looks pretty poor. I think

what I'll do is I'll just provide you a landing page that I want you to copy verbatim like word for word because just the way that you're using shadows and stuff like that looks really silly right now. Aside from that though, um, pretty well done. I like this. I'll provide you that landing

right now. Aside from that though, um, pretty well done. I like this. I'll provide you that landing page and then you can try copying it verbatim u to start and then we can make some other modifications afterwards. Here's the landing page. Okay, that looks pretty solid. I'm just going to

modifications afterwards. Here's the landing page. Okay, that looks pretty solid. I'm just going to go and I'm just going to find a really classy isomorphism glass. Okay, glass morphism, I guess, landing page. That makes more sense. Okay, we just want one that like actually looks like a

landing page. That makes more sense. Okay, we just want one that like actually looks like a like a real app, you know, not one that's BS. So, let me take a look what has like that light theme.

Okay, I like this. This is pretty good. You know, one of my favorite things to do is just to open up the local dev server and then just watch as it slowly but surely updates the page and, you know, incorporates your device. It's kind of neat. So, it's just done that up here. Um,

it's just using some fake logo here to try and mimic it, but obviously it's not the same thing as the actual logo. It's like adding small little elements here or there, changing like the colors and the background and and stuff like that. Um, so that's that's pretty cool. Quite sexy. I really

like um being able to see that. It's doing the same thing underneath with like the soft gradients and then obviously changing the uh the colors and stuff because some of the elements have not been adjusted yet. Obviously, the background in this case and the text is black. But yeah,

as it continues, it'll just get closer and closer and cleaner to that actual pixel perfect uh uh generation. Website's slowly getting better and better. It's getting cleaner. Um

all these elements now are starting to match color-wise. We even have that little down CTA with that light blue. So, this is a much better approach, I would say. Some other adjustments I went through and then in uh a lot more detail basically deconstructed everything that I wanted changed. So I wanted to make the nav bar a little bit square. I wanted to fill out the rest of the

changed. So I wanted to make the nav bar a little bit square. I wanted to fill out the rest of the dashboard underneath the hero header, make the social proof section infinitely revolving and so on and so forth. And the idea here is we just want to get the app as close as uh possible to basically perfect aesthetically speaking before I do all the rest of the work. Okay,

we got the website right over here looking really clean. Notice how we've gone through and then actually adjusted the dashboard down here. That's really, really sexy. Um, I'm not liking the slight difference in Oh, actually, no. That's basically perfect. Why don't we just, um, I think I'll probably square out all the buttons everywhere. But anyway, this stuff's looking real clean. We

have the pricing down below, ready to blow up your channel. I'm just going to go to dashboard. Let's

just see how the actual functionality of the app is. This looks pretty good. Um, I don't really like the light blue in the back, so I'll adjust that as well. But everything else is looking good, right? Like the margins are basically all the same. Um, we also have emphasize contrast. So

right? Like the margins are basically all the same. Um, we also have emphasize contrast. So

now the generation prompts are autopop populating. And yeah, I mean, I'd say this is pretty great. I

don't like the background blue on the um inside of the app page, like the dashboard to generate the settings. That component looks weird to me. I'd like some collection of soft gradients on the

the settings. That component looks weird to me. I'd like some collection of soft gradients on the background of the hero header in the landing page. And then I'd like you to turn all pill shapes right now into those rounded squares instead. I think that just looks a lot better.

For instance, the signup button in the navbar, the real-time generation from your prompts widget, and the dashboard in the hero header um image. I want all of those little pill shapes converted.

Aside from that, change define to thumbly. I want you to make sure that those two buttons, filter by CTR and plus new thumbnail, are just on one line. Right now, they're both on two. Adjust

the verbage if necessary. And then everything else looks really clean. Yeah, that's about it. All right, this is looking a lot cleaner. We have everything that we need on the landing page.

it. All right, this is looking a lot cleaner. We have everything that we need on the landing page.

Um, I like the fact that the cards no longer look that ugly, atrocious blue. At this point, all we really have to do is provide all of our API keys and tokens. So,

as mentioned, I basically want to reproduce the functionality of AI studio.google.com,

except I want to be able to provide a thumbnail and then a bunch of my own faces and then just have it replace the image in the uh thumbnail, or rather replace the person's face in the thumbnail with my own. This is a pretty common thing to do on YouTube nowadays. Basically what you do is you find like outlier really high quality thumbnails and then you just replace them and make some minor

adjustments. Um I'll show you guys what I mean. If you head over to this app here, one of 10, and

adjustments. Um I'll show you guys what I mean. If you head over to this app here, one of 10, and then you go down to, I don't know, videographer or something, and you know, just look for something like this by this fella here, Kristoff Oliver. I mean, like, is this the best thumbnail? Actually,

no. Let's use this one. This one's probably nicer. So, you see how there's like, you know, some fella here in the middle and then there's the text around it and then there's some little image.

So, I mean, like, you know, I think you'd probably design something better than this, but still. I'm

just going to save this image. Head over to AI Studio. I wanted to just switch my account to one that actually has credits. What I'm going to do is I'm going to stick this puppy inside. Then,

I'll say replace the man in the thumbnail with the man in the profile picture provided. Then, I'm

going to look for a picture of myself. I like this one. This one's pretty funky. So, I'm going to say replace the man in the thumbnail that includes how to build a portfolio with a man in the profile picture holding a trophy. Okay. So, what I want basically want to do, what I'm instructed to do is to take this and then just swap it out for this or something close to that. So, I press enter. You'll

see that it's not going to do the most amazing job right off the bat, but it's going to do an okay job. And basically the whole idea is we're just going to run this multiple times until we get

okay job. And basically the whole idea is we're just going to run this multiple times until we get like three or four options. And then we're just going to present them to the user and then they can just select one that they really like. And scrolling down here, you can see that we've since replaced that man just with me holding my trophy. So it didn't get like exactly what I wanted to do.

Obviously I don't actually want to be holding the trophy, but you can see that I'm in this fell's room. And for the most part, it looks like me. I mean, there's some minor little changes in terms

room. And for the most part, it looks like me. I mean, there's some minor little changes in terms of the skin texture and stuff. Um I think my skin texture is worse and it's like done some done some touch-ups, but you know, it's got my hair. It's got me holding the trophy. didn't add any extra AI fingers. And yeah, that's more or less what we're doing, right? So the question is, how do

AI fingers. And yeah, that's more or less what we're doing, right? So the question is, how do we actually do this in our app, not inside of this as studio.google.com thing and it's pretty easy.

There's just like a bunch of API routes for image generation. We just basically need to reproduce the same flow that I just did here over there. And then we need to um connect API keys and tokens and stuff like that. So I have an API key over here. Uh I'm just going to I don't know. I guess I need

to find a way to copy this API key. So why don't I go to get API key here. We'll create a new one.

And I'm just going to call this um thumbly. Going to click create. We're now going to have the key generated right over here. Okay. And I'm just doing this in a new one because I want to be able to turn it off. I'll then go back to anti-gravity. And then, okay, it's just done some changes for me. I don't know exactly what. Then I'm going to open up av file and then I'm going to say Gemini.

me. I don't know exactly what. Then I'm going to open up av file and then I'm going to say Gemini.

I think this is Gemini, right? What is this one technically called? uh maybe like nano banana API key and I'm going to paste that in. Um there are a couple of other things that we need if you think about it. So this is not enough. We obviously have to go through the whole superbase spiel and then

about it. So this is not enough. We obviously have to go through the whole superbase spiel and then get a bunch of images. Sorry, I get a a database from there. So I'm going to set up a database on Superbase just like I've done before. Head over to superbase.com or rather I think it's database.new

is even faster, right? Yeah, there we go. I'm going to do it inside of proposal generator.app

maybe gyro. Okay, never mind. I need to go and delete one of these old ones, so bear with me one second. This is in the leado database, right? So, I'm just going to delete this project. Leadzo

one second. This is in the leado database, right? So, I'm just going to delete this project. Leadzo

DB. Cool. Thank you. Delete. Um, and then I'll go to database new. Once that's done, now it's going to say, hey, let's make one. I'm going to call this one um Thumbly DB. Again,

I'm going to generate a password. Copy that password over. Enable. Oh, cool. They also now have automatic RLS, which is cool. So, I'm going to create a new project there. And what I want is I basically want to um paste in my database password. Let's say superbase DB password.

Paste that in. Um I don't know, superbase project URL. Paste that in. Previously, I

did this just directly inside of the um you know, agent chat, but this time I'm actually going to copy and paste it over to the CNV. So, Superbase publishable API key. I'm going to paste that in.

I think there are a couple other ones. You know, I just want to give it my API key as well. So,

we'll go superbase project ID. Paste that in. You can see it's the same thing as in my URL. So,

basease project name I'm just coming up with all excuse me, I'm just coming up with all this stuff um myself. Like I'm coming up with these names myself. Um these aren't really important. The

um myself. Like I'm coming up with these names myself. Um these aren't really important. The

model can understand the context themselves. Okay. So, I I have more or less all of that, which is cool and pretty clean. Um, and then yeah, now it's just provisioning my database and API input. It's actually creating them for me. So once all that stuff's good to go. I'm just going to

input. It's actually creating them for me. So once all that stuff's good to go. I'm just going to paste that in. Any other additional functionality we need? I don't think so. So I'm going to say is I've added a bunch of uh credentials for nano banana and then superbase um into the env file.

You now have everything that you need in order to actually build out the functionality of the app aka the API calls. I'll go call or find the um specific endpoint to reference. But basically,

we're going to be replicating the functionality of um Google's AI Studio just inside of my app.

Let's see. ENV. Cool. And then, you know, there should be the ability to grab the code. Okay, cool. And there is. So, I can grab this code. And then

we're just going to go rest here. And then what I want is I basically just want to copy all of this stuff. And then I'm just going to paste this in.

Here is some REST code straight from their dashboard. And then I'm just going to paste this in, which should be everything that they need in order to actually like generate the the thing. Keep in mind we're going to be supplying two inputs. The provided

the thing. Keep in mind we're going to be supplying two inputs. The provided

thumbnail image and our prompt uh I guess three inputs. The provided thumbnail image um images of the person's face and then a prompt check there. Let me see. Are there any docs or something like that I could use to give

check there. Let me see. Are there any docs or something like that I could use to give me more data? Okay, check their docs if you need more on how to do this. First,

test all of this via curl to make sure it works. And then once it works, you can put it on the app. And then finally, I'm going to just provide some base um data here. So, you know, earlier I had that portfolio builder image. So, I'm actually just going to supply these images.

Um, so this is going to be one image. I think we can just open this in a new tab. Okay. No,

I guess we can't. So, let me just save the image. This is going to be the supplied. Okay,

this one over here. Then I'm going to move into anti-gravity. Just upload this to the agent. I've

provided you three things. supplied the image to insert a face into um face the image to get the

face from and then prompt and the prompt is going to be here. Let's just save this too. Uh this is pretty big actually. I don't know if we'll be able to feed all this stuff in. Let's say face And uh it should be able to pull all of this data up from just the names.

Okay. In case like unless we get blocked, we should be good. Just going to double check this because we we have supplied like a lot of image files here. I mean this was like 4 megabytes.

This here was like I don't know megabytes. So in total it's going to be like five or six megs which is actually pretty chunky. Maybe they like automatically resize the images or something so it's not taking up a massive amount of tokens. But um you know I always do kind of worry like oh am I going to run out of usage and stuff. Okay. So I'm gonna allow this conversation. It can do more or

less whatever the heck it wants. And then um just double checking thumbly. Yeah. I mean like this honestly looks really clean. I'm liking this quite a bit. Nice. And then we have like this infinitely revolving social proof section here which you know you stick your own social proof in. And then all of the um buttons and stuff like that are square now which is cool. And everything is just a little

bit more squared off. I don't actually like this shadow. There's a slight shadow in the background here, which hurts, but not the end of the world. We have the ability to change this. This is nice.

Cool, cool, cool. Awesome. I mean, like, you know, I think this is basically like the the MVP of um a high quality app with the landing page. So, wonderful. I'm just going to wait and then um let you guys know when we're done this next step. Looks like it's already making API calls, which is cool. Just using everything that I provided it below. Generative language. Google APIs appears

is cool. Just using everything that I provided it below. Generative language. Google APIs appears to be the endpoint. That's pretty nice. And so it's gone through and actually verified that this works and it's created um another step inside of implementation plan. So now it's going through and then integrating this directly into the app. So it's not just going to be doing it

via its own curl requests, but I'll be able to do it via uploads files and stuff like that. Okay. So

just signing in here. We've now integrated the um database functionality. Going to go over to generate and see if we can do this. So you know I can obviously add images and we just did. So

now we have this cool little blur effect which is really nice. Let me see. Keep the style identical to the inspiration image. Make the main subject highly cinematic with dramatic neon backlighting.

Contrast. So no, I'm going to say but replace with the user. Oh sh uh crap. I need to actually provide images, right? So let's upload some faces. Let's do face. This is now me. Okay. And then here inside of the default prompt instructions, I'll say replace the thumbnail image with the supplied

user cinematic. and I don't know dramatic lighting on the face. Replace the face of the person in the

user cinematic. and I don't know dramatic lighting on the face. Replace the face of the person in the provided thumbnail image with the face of the supplied user. Cinematic and dramatic lighting on the face. Let's save the config. I'm just going to refresh this. Has that been saved? Okay,

it is. This has been saved as well. Okay, that's great. You know, might as well test one additional piece of functionality here, which is if I could just paste the URL in. So let's go back here, paste that in. Okay, cool. So we've actually we've actually now got this in the URL, too, which is clean. I'm going to click generate variance. And this is really like the test

of the functionality. So I'm going to give it a few seconds. Then I'll double back with um you know, changes if it didn't work, and then maybe some next steps if it did. Okay,

we've actually generated one of the options here, and it looks interesting. Um for whatever reason, look, it's like the background's kind of white. I don't know. And we've only done one, so we want to do three, right? Obviously, we're going to want three. I see there's some click functionality, which is kind of cool, but um yeah, we're going to have to do more. So, the first thing I mean, the

dramatic lighting looks freaking badass. Like, you know, it's not exactly my nose, to be honest. It's

a little bit different for me, but still really cool. Hey, we've um generated only one, not three.

So, just double check and make sure that there was no issue in the background that prevented us from doing um all three simultaneously because we want to populate that with three thumbnail images, not just one. Also, when the images came out, they had this sort of like white sheen or overlay. They

looked kind of transparent. I just want you to remove that. Um, so that I just can see the actual image immediately. Uh, and yeah, I think that's about it. What's interesting is while it did that,

image immediately. Uh, and yeah, I think that's about it. What's interesting is while it did that, it consumed three credits. Okay, so the credit consumption functionality is there. However,

when I saved this, it saved it twice. So, that's another thing we'll have to change. This time

we're going to do the same thing just with the supplied version instead. And then I should just be able to click generate variance and we should be able to do three, right? Since we're generating three times. So credits available um on the left hand side, which you guys can't see. Say 197 right

three times. So credits available um on the left hand side, which you guys can't see. Say 197 right now. Okay, now we have three provided variants. These all look awesome. I'm loving this. Loving

now. Okay, now we have three provided variants. These all look awesome. I'm loving this. Loving

the the really badass lighting on the face. That's neat. Um so now what I'm going to do is I'm just going to select one of the variants that I want to keep. So why don't I select this one? That one

looks probably the most realistically me anyway. And then I'll click keep selected thumbnail. It

says thumbnails saved to your gallery, which is awesome. Okay. And then we go back to overview.

And then we can see this new one here. Beautiful. Okay. So, I guess what else we need? Like the

first thing comes to mind is we just need a way to like delete these, right? Provide a way to delete um the thumbnails under recent generations. Basically, I want to be able to delete ones in my gallery so that I don't have to see them in the database anymore. Um aside from that though, everything looks like it worked really clean. Oh, um, instead of like the alert that comes up, um,

just make like a nice modal, a nice toast message, um, that then allows you to, um, I don't know, open it in a new tab or download the image or, uh, go back and generate a new one. Also, just little things. I mean, these intelligences are so dang good. Notice how in this one here, I don't have

things. I mean, these intelligences are so dang good. Notice how in this one here, I don't have the O behind my neck, but in this one, I I do. Like, it's, you know, it knows the placement of the O and where it should be and stuff like that. But yeah, um now that we're done with all this, what we're also going to do is we're going to uh like after we get the little X functionality,

we're going to hook this up to Superbase and then it's just going to give me that migration script so that I could use this in like real production scenarios. Then on from there, it's connecting it to Stripe so that the payments work and then yeah, everything's just going to be 100% live, which I'm really excited for. Speaking of Stripe, I forgot, but I do need to provide the keys there

as well. So, let me head over to Stripe, sign into that sandbox. It's right over here. And then

as well. So, let me head over to Stripe, sign into that sandbox. It's right over here. And then

I'll give both the publishable key and then secret key. So stripe publishable key, stripe secret key.

Then I'm just going to save this and say, hey, I've also added the Stripe publishable key and Stripe secret key. I want you to connect the payment feature as well. You may have to adjust the SQL migration script. So um do this first. Okay. And the really cool thing is I can just queue up messages. So even if I change my mind or do a bunch of things, I can have this message

sent. I can then read that message and then just um incorporate it in the flow. I don't actually

sent. I can then read that message and then just um incorporate it in the flow. I don't actually have to wait until it it all finishes. So that's pretty clean, huh? Pretty stoked about that.

While we're waiting, why don't we test this on another thumbnail? So I'm going to head back over to generate and then I'm going to paste this in. Going to set that. I'll say replace the face in the provided thumbnail which is the face applied to use cinematic and dramatic landing the face.

Also replace 100 to 1,000. Let's see if maybe we could get um a slight little variant of the actual number in the background as well. Generally speaking, my experience with these AI models, you only really want to suggest one major change at a time. So maybe what I could also do is add like a little tips feature or something like that so that people know um how to prompt these things

and get the best results. Nothing like clean work. This one here looks real good. I like it. We have

the 1000 in the background. Also dramatic lighting on the face. That's cool. And this one has dramatic lighting on the face with my actual skin texture. Thank you, Rosa. Um, honestly, I think all all three of these are really badass. So, I'm going to keep this one. And as you can see, I'm going to have a toast message instead. So, I can download this image. I can open in a new tab. Uh,

that one doesn't seem to work, so I'm going to have to modify that. And then I can also click generate another. It'll take me back to this page. So, really, really clean functionality. I mean,

generate another. It'll take me back to this page. So, really, really clean functionality. I mean,

this is basically exactly what I wanted. Just wish it could be packaged in a slightly better UX, but we'll we'll solve that later. It's now going through and just doing a bunch of Stripe stuff.

So, creating API routes, resolving TypeScript errors, and so on and so forth. I'll let it go and just do that thing. um as it wills and then we'll double check how all that works with SQL and we're done with that. Okay. Now I'm going to use the uh big thing inside of Superbase schema migration script the file that it created for me. Then just hold command and press enter. I

realize I used to think that you couldn't have comments in here but uh you can. It's just the comments that the previous model did for me were I think like with two hashtags instead of um two dashes. As long as there are two dashes, you can basically pump this whole thing in and there are no problems. And it's always good once you're done with that just to go back

to database and then you can see how everything interacts. So see the model here is set up ID, user ID, original image base 64, prompt, generated URL, selected URL, and created at as well as ID, email, credits, Stripe, customer ID, subscription ID, default prompt, face images B 64, and then created at. This is where we're basically going to store their status. Okay? And then over here is

created at. This is where we're basically going to store their status. Okay? And then over here is where we're going to store the number of credits that they have. So if they have a subscription ID, then they will have been signed up. Um, obviously if they have credits, any credits, then we'll populate that. That's where we're going to get this from. Um, and then if they're at zero

credits, then when they attempt to make a thing, it'll check their credit balance. And, you know, because they don't have any credits, that won't be able to uh work. The primary key of thumbnails is ID. Primary key of users is ID. These two things are sort of mapped together. And then, yeah,

ID. Primary key of users is ID. These two things are sort of mapped together. And then, yeah, everything else here looks pretty solid to me. So, just heading back to anti-gravity. Right now,

what it's doing is just finishing up that little migration from uh mock routes, which are when you store all of the database files and like, you know, your your local computer to ultimately like live supabbase instances. And it's just doing a build right now to verify that everything works uh the way that we told it to do it. And as you can see, I've just signed into this supposed new

account here and uh we are now at zero credits available. So, it's pulling it directly from the database. Meaning if we want to run the full flow, we now have to go through create a new account

database. Meaning if we want to run the full flow, we now have to go through create a new account and then run basically the entire signup flow. So I'm just going to go back to anti-gravity, verify that everything is good. Awesome. Live database has now replaced our prototype API structure. I've now done it all. So we should be able to test this. Just going to head back first

structure. I've now done it all. So we should be able to test this. Just going to head back first to Superbase and then I'm going to turn off the feature of authentication that forces us to um confirm our email. So you can do that in signin. I just do that because it's a little bit faster. And

I realized after that first build, I was spending just as much time, you know, signing up as I was doing everything else. Now I'm going to click sign up. And this is sort of the desired user flow. So we'll go nick@niki.com. Continue with email. Let's see what happens. Just says signing

flow. So we'll go nick@niki.com. Continue with email. Let's see what happens. Just says signing in. There's no password. So this is a problem. Um, notice how before we always had an email address

in. There's no password. So this is a problem. Um, notice how before we always had an email address and a password. Now we just have this like email. So I think this is probably a blind spot where it didn't really realize, oh, okay, we're connected to Superbase. Now we have O. So we're going to need an actual like login page. Hey, the login right now only requests an email, but I need to

authenticate with Superbase. I'm pretty sure we'd need an email and a password. No, I just tried to create one and it didn't really work. There were some errors. Okay, so now going to see if maybe I'm already logged in or something. We go to payment. Yeah, no, we can't. So,

I mean like the middleware routes are working as we could tell with dashboard and stuff like that.

Everything redirects us to login. It's just the actual login doesn't seem to be um set up yet. So,

we'll double click that. We'll double check that. Um, it looks like we also added some additional landing page stuff here, which is super cool. So, this added a whole new section based off what we added. AI power generation, AB testing, clean modern aesthetics, and so on and so forth. We

added. AI power generation, AB testing, clean modern aesthetics, and so on and so forth. We

also have some FAQs here based off how it works. So, that's really cool. And then we have the ready to blow up your channel. Um, Gemini will do this from now and uh every now and then. I don't really sometimes it's sort of annoying when it acts without necessarily asking you, but in this case it was what I wanted because really really early on in the prompt I said, "Hey, I want you to make

this longer." And then it said something like, "Oh, I don't have enough context to make this

this longer." And then it said something like, "Oh, I don't have enough context to make this longer." So I guess it just like generated its own context based off of our conversation history. One

longer." So I guess it just like generated its own context based off of our conversation history. One

thing I really like about this app is just how fast it is. I mean, each of these routes are what are called preloaded or pre-filled. And so this is me like really quickly going from one page to the other. And just notice how this whole page is just like automatically done. Um, I also really

the other. And just notice how this whole page is just like automatically done. Um, I also really like these brief little animations where you, you know, start at the top and work your way down, loading each element slowly in succession. You just get the, uh, visual appearance of very fast, very performant website. Okay, we have some new superbase schema. So, I'm just going to

jump over here and then what this is going to do is go through and then add the rest of our users, tables, and stuff like that. So, back to SQL editor, paste this in, run. Okay, the updated SQL script seems to have worked. So, I think we just added one or two additional records here and then allowed it to add like the email and the password. Heading back to Thumbly, if I go click sign up,

we're running into Superbase URL is required. So, they do have some runtime error. Now, I'm

just going to paste all of this in. Okay, this new signup page seems to work. We'll go nickniki.com.

Then, Nickniki. Um, I'm going to click sign in. Invalid login credentials. The reason why it's telling me this is because we obviously don't have an account. So, I'm going to go back to sign up instead. I like that it keeps the email address and the password. I don't have to redo it. Okay,

instead. I like that it keeps the email address and the password. I don't have to redo it. Okay,

we now have the secure checkout with the starter plan with 100 thumbly credits. So, now what I can do Okay, because we're we clicked the starter plan. So, I can go Oh, actually, did we click the starter plan? Hold on one sec. I don't necessarily just want to buy the starter plan. I might want to

starter plan? Hold on one sec. I don't necessarily just want to buy the starter plan. I might want to buy pro. Let me try agency, actually. Okay, we'll go nickniki.com. And do we have the account? Oh,

buy pro. Let me try agency, actually. Okay, we'll go nickniki.com. And do we have the account? Oh,

you see because we exited out of the um payment flow, it immediately jumped us into dashboard, but it selected the starter plan automatically. So, I need to change that. Right now, it's automatically selecting the starter plan. You should allow the user to select which plan they want on the payment

page. It should also take into account which button they click on the landing page because

page. It should also take into account which button they click on the landing page because there are three different payment options there as well. Just going to enter this in and then I'm going to proceed to check out just to see what happens. When I click proceed to checkout, nothing occurs. And I think the reason why is there might be some problem here. Additionally,

nothing occurs. And I think the reason why is there might be some problem here. Additionally,

when I click proceed to payment, nothing occurs. Do we need to open up a Stripe checkout window or is the payment occurring locally on the platform? Keep in mind, I'm using a Stripe sandbox, so we should be able to test the payment and have all of the events and stuff like that run true. Hey,

more pointedly, um, since I am now signed in, I should be able to go to the dashboard even though I haven't done the payment. If I go to overview and then click generate new and then actually go down to settings, can I upload my face? So, we go supplied face. Okay. And I'm just going to refresh this. Am I still here? Okay. So, I'm not actually keeping the reference faces in. And this could be

this. Am I still here? Okay. So, I'm not actually keeping the reference faces in. And this could be because my account is not like set up yet because the payment hasn't gone through. I'm not entirely sure. Let me just make sure everything else works here. So, face that goes through. All right.

sure. Let me just make sure everything else works here. So, face that goes through. All right.

If I click generate variance, what's going to happen? Please provide an inspiration image and a prompt. So I have the inspiration image here. The prompt is right over here. So we also have an

a prompt. So I have the inspiration image here. The prompt is right over here. So we also have an erroneous error message where it says please provide an inspiration image and a prompt. Hey,

I provided an inspiration thumbnail and a generation prompt. And I clicked generate variance, but I'm getting an error called please provide an inspiration image and a prompt. I think

this is occurring because I don't have a reference face. However, that error is not representative of the real problem. If this are if this is the case, I've also noticed that when I click upload face on reference face, then I click save configuration, nothing happens. And then if I refresh, my reference face is gone. So make sure that the save configuration button works. If it's

not working because of some frontend error, fix that. If it has to do with superbase, let me know if there's anything I need to do on my end. And I'm just going to continue going through this and seeing if there are any other errors that I could spot. Obviously, I'm going to sign out again because I'm on a local dev server. This is all occurring in real time. So, any updates I

make to this is going to be reflected. Um, but we do need to make sure that if credits available are zero that we immediately jump back, right? So, some other design decision. If a user has zero credits upon signin, we need to redirect them to a payment page where they could select um, you know, how many credits to purchase and stuff like that. That should occur every time a user is at zero.

Now, if you're noticing, I'm not actually just like doing waiting, checking the feature, and then proceeding to the next one. I'm now at the point where I'm just dumping in a bunch of changes. And the reason why is because most of these changes are relatively minor. Uh, you know,

of changes. And the reason why is because most of these changes are relatively minor. Uh, you know, it's probably just some slight little database misconfiguration or whatever. And so, I can actually proceed in this way. Um, have it working on a change while I'm like modifying the rest of it. On the landing page under everything you need to win the click, I don't like the shadows

of it. On the landing page under everything you need to win the click, I don't like the shadows in general. I'd actually like you just to remove shadows across the entire UX of the website. It

in general. I'd actually like you just to remove shadows across the entire UX of the website. It

they just seem a little bit off um given the fact that most of the website does not have shadows and does not use them. Under the frequently asked questions where it says how does thumbly insert my face? Can I use any images inspiration etc. The title text is good. So how does Thumbly insert my

my face? Can I use any images inspiration etc. The title text is good. So how does Thumbly insert my face? Is written in like this nice black text, but the subtext that says when you upload your

face? Is written in like this nice black text, but the subtext that says when you upload your reference photos in the dashboard settings, our models learn your facial features. That's a little too dark. Can you lighten that just by 10% or so? In this way, I'm sort of arbiting the time between

too dark. Can you lighten that just by 10% or so? In this way, I'm sort of arbiting the time between the changes that are occurring here and then um you know my testing. So, signing in, going back to the dashboard. Let's go to top up. Okay, cool. And now we have the ability to select these three different plans, which is cool. Okay, so why don't we pretend I'm doing pro. And then every time I

click redirecting to Stripe, looks like there's this problem which pops up. So, I'm actually going to copy this over then say every time I try making a payment by clicking the proceed to checkout page, this error occurs. But I mean like you know we could also parallelize this and do a bunch of them simultaneously. No real need. Um but yeah I mean like you know we're getting closer for sure.

them simultaneously. No real need. Um but yeah I mean like you know we're getting closer for sure.

One other change it just made is when I click on starter you see it goes payment question mark plan equals starter. So I'm actually on starter but if I go pro it actually opens up this page to pro.

equals starter. So I'm actually on starter but if I go pro it actually opens up this page to pro.

So these links do something now which is kind of cool, right? I can actually click get started and then go to a specific payment page. I'm unsure if this is because I'm logged in or logged out though. I'm going to click sign out. Then I'll go back here and then see what happens. Okay,

though. I'm going to click sign out. Then I'll go back here and then see what happens. Okay,

so login question mark plan equals pro. That means it's actually going to keep and conserve this query parameter as I browse through the rest of the website, which is pretty neat. Okay,

now the redirection script has changed. It's pretty clean. The way that this always works is you can just put in whatever um numbers you want so long as your card details are 4242 repeating.

So I'm just going to click pay. Please do not save this card because it doesn't work or exist. And

it looks like after the payment, we're being sent back to the main page. So, I'm just going to say, "Hey, it looks like the Stripe Checkout payment um went through, but then it redirected me to the slash payment route." Uh, if I go to dashboard, it continuously pushes me back to that route despite the fact that I've already made the payment. So, we just need to find a way to validate that the

user's actually done the payment. That seems to be the main block right now. Okay, it's telling me that it's finished this, which is cool with new secure endpoints and session IDs and stuff like that. Okay, I'm just going to try a new account here and see if maybe there's a problem with

that. Okay, I'm just going to try a new account here and see if maybe there's a problem with that. Maybe it just has to do with the fact that I had an old account and it's redirecting me based

that. Maybe it just has to do with the fact that I had an old account and it's redirecting me based off some old flag. Then I'll click processing there. That payment looks good. No, it must be a more broad issue. So, check out Stripe here. It looks like we are receiving the payments. So,

that's going through. Um, for whatever reason, we're not actually capable of connecting that back to a person. This is my fake card, nick@niki.com. I've made tons of payments. Uh, I'm just going to relay this information over to my agent. If agents have a hard time dealing with stuff like this, it's best just to give them as much context as humanly possible so they don't get stuck on one

loop over and over and over again. Okay, looks like I've finally made it into the dashboard. So,

we finally solved that persistent error um to do with payments. As I'm sure you guys can imagine, you know, adding payments is like adding another whole u problem that you have to solve, which is why I wanted to push it off as long as possible. But, uh, now that we have I'm seeing that the credit monitoring is good, settings look good. But I'm going to try uploading

faces. See if we could um diagnose any issues there. The saving configuration button looks

faces. See if we could um diagnose any issues there. The saving configuration button looks like it works if I refresh this now. Okay. No. So, it's telling Oh, okay. Cool, cool,

cool. I got worried there for a second, but I guess we had a bit of a lag. Um, that's okay.

Okay. Going to take a peek at an example. Why don't we just go to thumbnail generated? Oh,

no. That's uh that's me from before. Let's do this one here. And then um it doesn't look like we're saving the prompt variants. That's one change. I'm also noticing this is significantly laggier than it was before. Uh make the main subject highly cinematic. Replace the face with the face of

the supplied face of the reference image. Use dramatic cinematic lighting on the face. Okay,

let me try saving this configuration. Just seeing if maybe it's an error or if maybe I didn't fully understand what this is doing. If I refresh this now, do we have that default prompt down below or does that need to be dealt with as well? And why is it so laggy? It may just be my computer. I am

editing a bunch of videos. So, okay, that doesn't look like that filled in, which is unfortunate.

Um, why don't we do supplied here? Generate new variants. Okay. Make sure the generation prompt auto prefills with the default prompt in settings. Right now it isn't. It should pull directly from the default prompt instructions. It's also a little laggy. The app takes significantly

longer to load now than it used to. Diagnose whether this is because of some persistent error behind the scenes or some issue with prefilling or something else. Okay, taking a peek at this.

It did give me a very sexy beard. Let's be real. Nick definitely can't grow that level of facial hair. But now like the internet will be able to tell the difference. Cue that one up. Thank you

hair. But now like the internet will be able to tell the difference. Cue that one up. Thank you

very much. After the save, it's going to pop up this little thumbnail saved. Um let's download the download the image and just see how that looks. See if there are any problems there at all. Nope.

That looks like definitely fake Universe Nick, which is what we wanted. I'll go back to generate another. Now I can do more. Okay. And it looks like this is taking some time to load. I mean,

another. Now I can do more. Okay. And it looks like this is taking some time to load. I mean,

it's saying zero. Okay. Now it's saying 97. I think I know the problem. I think in order to fix whatever payment BS that it had to do, it's now fetching data from the database on every page load, which is adding a fair amount of latency and then causing the app to lag a lot more. So, it's

obviously not what we want, but it's what's going on. That's why every time I load settings, it takes a second before this comes in. Ideally, what you want to happen in a full stack app like this, at least a modern full stack app, is when you sign in, you want it to automatically cache and then like like pull all the data and then cache it. Um, and then that way everything is pre-filled,

all the images are prefilled, the credit amounts prefilled, so on and so forth. And then instead, what you want is you basically only ever want that to change if you materially change the database.

So when you change a database, then it says, hey, you know, you should probably grab the new data as well, just uh just to be 100% sure. And in Nex, they manage this through a variety of means, but a big one is like mutating the database um or or setting like mutations or or whatever as opposed to always fetching totally new data. So, I think that's what's going on. I'm just going

to instruct the agent, see if we could fix that, and then assuming that there's no other changes, I'm just going to push this puppy live. Okay, looks like it's loading significantly faster now, which is nice. We can jump around from settings to generate to overview, and we don't have that like really persistent lag like we had before. Um, we also have the ability to, you know,

delete if we wanted to. I think what I'm going to do is I'm just going to open this in, well, not an incognito window. I guess I'll just open it in a new tab. And then what I want to do, whoa, I don't know what the hell just happened here. No, thank you. Let's not do that. Thank

you. Thank you. Um, I think what I'm going to do is I'm just going to try the mobile features now on the dashboard because mobile optimization is pretty big, right? Just want to make sure this is going to work. And it looks like it is. We have um we have a little nav bar down at the bottom now,

which is kind of cool. And we can jump back and forth between these three. So, that's nice. I am

a fan. Thank you. And now, let's just exit out of the dashboard, go back to the landing page, and just see what we're looking at. So, looks like that mobile optimization prompt worked in so far that, you know, the um little section here is mobile optimized. And then all this stuff's mobile optimized. I'm just going to pretend sign in now. Okay. Okay. And then yeah, we immediately

mobile optimized. I'm just going to pretend sign in now. Okay. Okay. And then yeah, we immediately jump to dashboard where we have functionality. Let me just try deleting this. Yeah, I want to delete it. And then if I just refresh this puppy, is it gone? No, it's not gone. So that's the final

delete it. And then if I just refresh this puppy, is it gone? No, it's not gone. So that's the final change we need to make. And then uh yeah, I'm pushing this puppy live. In addition, I've also set this up. So it's now at thumbly-g.netfi.app. I just said, "Hey, put this puppy on GitHub and Netlefi. Let's do this thing." And uh yeah, this is actually working really, really good. So,

Netlefi. Let's do this thing." And uh yeah, this is actually working really, really good. So,

I'm just going to go over to sign up here and I'm going to go nicholas@gmail.com. Would be a hell of a name if I could pull that up, though. And then we'll go proceed to checkout and I'm just going to enter some info. Apparently, my card holder name is 234234. Take that, Nicholas. This has jumped us directly over to dashboard and now I have the ability to do everything. So, I'm going to upload

some face. Uh, what was it again? Was it supplied? Yes, it was. Keep the identical to the inspiration

some face. Uh, what was it again? Was it supplied? Yes, it was. Keep the identical to the inspiration image. Replace the face. to face the reference image. Use dramatic cinematic lighting on the

image. Replace the face. to face the reference image. Use dramatic cinematic lighting on the face. Cool. I'm just going to save this. Says that it saves successfully. Oh, hold on a second.

face. Cool. I'm just going to save this. Says that it saves successfully. Oh, hold on a second.

That's not my face. That's my face. Good god, Nick. You know, you've been developing an app for a long time when you start making trivial errors like that, huh? Okay, now I'm going to generate three variants. Um, we're going to see how long this takes. So, counting down. 1 2 3 4 22.

three variants. Um, we're going to see how long this takes. So, counting down. 1 2 3 4 22.

Okay, so right at 22, we had an unexpected error occurred. So I imagine this probably actually went all the way through. There was just some problem with updating the DB. Uh this occurs as mentioned when you go from local to some sort of like cloud setup or or you know actually like hosting it live. So I'm going to go through and just give this an unexpected error occurred. Do a little bit

it live. So I'm going to go through and just give this an unexpected error occurred. Do a little bit more final debugging and see what we need to do to make this puppy. I would imagine the issue is probably related to the fact that um when we were running this locally, we didn't have a timeout, but services that like manage the calls for you, like uh Netlefi, for instance,

typically have timeouts of like 15 seconds or so, maybe 20 seconds. So, I think we probably just ran into that. Okay, just ran out of usage again after developing this for a good hour or so. So,

I've moved over to Claude Code. Uh I'm still going to try pushing and generating the variants here.

We're going to see how that goes. 22 Mississippi, 23 Mississippi, 24 Mississippi, 25 Mississippi, 26 Mississippi. Okay, so right at 26 seconds is when we got the result. Um, I imagine that's probably

Mississippi. Okay, so right at 26 seconds is when we got the result. Um, I imagine that's probably why this one's kind of weird. I think that's the first one that's like actually objectively failed.

Uh, but yeah, no, I like this one. So, why don't we just keep selected thumbnail? Awesome. Looks

clean as per usual. And uh, yeah, I mean like we'll just click generate another and we can just keep on going as many times as need be. But that's it. We just launched our app and it works. And

there's one final thing we need to do, which is that god darn security audit. Almost forgot. So,

let's do that. Okay, pasting this directly into cloud code. As we can see here, now reading all the client pages and doing the config. And let's see how we do. And it's just building to verify that everything compiles now. And then I'm going to do a final check just make sure that, you know, the app functionality works the way I want it to. You'll quickly realize that the vast majority of

time that you spend on this is not actually the building. It is just the giving of vibes plus the verifying it works to the way your vibes require it working. So I made a bunch of these changes. Um

okay, there's some rate limiting off middleware. Okay, so I'm just going to say implement the middleware with check stripe web hook secret etc. So I'll probably have to go and grab some stripe stuff, but I'm just going to go and verify that this actually works now. Awesome. We still have

the ability to do everything that we had before, which is nice. Okay, I'm taking a look at this is so interesting. Like if you really zoom into one of these things, you see every little pixel that this constructed. It's wild. Um anyway, I mean like that dead inside completely. But yeah,

uh we're now going to run a with check migration on the database. So that's going to be cool. And

then we'll also add some web hook secrets. So I'm going to head over there and then just verify that um I got all this. Okay. Well, that one took a little bit longer than I wanted it to because we did have a bunch of back and forth with the payments on Stripe, but suffice to say, still good to go. Uh this is a good example now of everything. It's not only, you know, kind of CRUD

create, read, update, delete, like a traditional app. Doesn't just do stuff that you ask it to. We

also, um, are wrapping around a pretty popular and powerful API, the Nano Banana API. And then

we're applying some prompts and then some sort of creative applications here to generate really cool outputs. Uh, and then we're wrapping it all in a really nice UX and connecting it to payments. So,

outputs. Uh, and then we're wrapping it all in a really nice UX and connecting it to payments. So,

at this point, like you guys basically have everything that you need in order to just build whatever full stack app you want. Uh, I think what I'm going to do next is just do one final app combining everything that we talked about. Maybe make the UX a little bit more complicated. So,

instead of just having three or four, you know, two or three things on the left hand side, we have like what might uh be considered more of like, you know, like a really successful enterprise app. And

then I'm just going to run through the motions that I've already showed you guys multiple times at this point before talking a little bit about the economics of vibe coding and then wrapping up.

Man, I am so excited for this app because as somebody that produces a tremendous amount of content nowadays, having an app that can basically allow you to focus on one uh place, let's say YouTube or maybe your blog or something and then have that same content, the same concepts and ideas immediately distributed to a bunch of other platforms is fantastic. My issue with the way that

most people do this is they just do it in a really poor way. And so, you know, the end uh output quality of, let's say, a blog post converted to like Xthread snippets or whatever ends up being so bad that, you know, the AI slop um overruns it and then the quality is really poor. So, my idea

today is I want to make an app that's so dang good that, you know, you don't get that. And it's still written in your tone of voice. It's written really succinctly. It's written really intelligently.

And I was trying to come up with like a good name for this app just before, you know, like clearly if you guys have paid attention so far, the names so far have been afterthoughts, right?

But um this time I think I already got one. It's going to be called splinter. And the idea is okay, you're going to put in one piece of content which why don't we just call this like pillar content.

This is going to be like the pillar upon which everything else rests. And maybe it'll just be I don't know like a blog post or something or maybe like a video URL, right? And then what I want is I want this to be able to create content for a platform like X. I wanted to be able to create content for a platform like LinkedIn. I wanted to create content for Instagram. I wanted to create,

I don't know, scripts, maybe like long form scripts. And then I also want short form scripts, right? So we could do stuff. And then like eventually, and I'm not going to get to this now,

right? So we could do stuff. And then like eventually, and I'm not going to get to this now, I don't think, cuz it's kind of a big ask, but um we should also be able to create like video like full stack end video. Um that would be my that would be my end goal. So, this is basically what

I want the app to do. I want you to be able to provide one piece of content and then immediately just like, you know, creates high-quality content that's specific to each platform. And obviously,

we're going to need to do this through some sort of dashboard. In addition, okay, I don't just want this to be basic where we had like our little dashboard on the left hand side with like, you know, three things and then we have some other like central section um over here. I want this to be more interactive and I want this to have some sort of like really detailed onboarding as well.

Um, this is naturally going to involve like a fair amount if you think about it. Not only are we going to have to do everything we did in the last app, which was to uh summarize a landing page, Stripe payment integrations, um, OD DB, some sort of API wrapping, and then like a good way to, you know, present that to the user. We're going to have to go further because it's now not just

one like API that we're wrapping around, but it's realistically going to be multiple. And

then we're also going to use our own custom logic sort of um on-site logic to well not on-site sorry but like our own proprietary stuff to do things like manage the tone of voice the prompts and so on and so forth. And perhaps one of the coolest parts of this is I think the last app used AI as

just like an like an afterthought to help generate you know a list of filters in this AI is going to be like the main deal and uh hopefully we all know like AI is the big thing right now. So,

it allows us to sell both uh AI and our value props, but also AI through the apps. And my my goal when building apps is I just want to build stuff that like I actually would use uh if I wouldn't actually use it as somebody in a space. Odds are I probably don't understand the problem enough to even be building this app in the first place. But yeah, you know, if I could

save myself a bunch of time with this, that's going to be a solid win. And then if I could save other people time of that and stuff like this as well, then that'd be even better. Okay,

so the very first thing I'm going to do is I keep turning back to this 16 or 17-year-old kid. No,

he's 16 years old. His name's Leon. And what he's been doing recently is he's been building like really cracked high-quality landing page designs for Gemini. And so he comes up with these very very in-depth prompts. And then he ends up with like a literal interactive app that you can like move your your fingers around. Unfortunately, you didn't take a video of this, but this is like,

you know, an app that there's like little strings that are basically here being um processed every second through I don't know if it's like web web GUI or something like that, but it's some sort of 3D library. And um he shares his prompts online. He's really cool. I used him in my last video.

3D library. And um he shares his prompts online. He's really cool. I used him in my last video.

I wish I had half that uh brain at 16 years old. And so what I'm doing just to start us off is I'm going to copy this prompt that he's put together. Okay? And then I'm just going to ask Gemini to make me a landing page. And I just want it to make me a landing page first before I do the rest

of the app because I just don't trust that it'll be able to do both the very in-depth programming required to build some sort of cool 3D generative thing and then also do the app. So basically what I'm going to do is I'm going to have it like generate the the landing page and then we'll build the rest of the app out afterwards. Um, so you know, kind of non-traditional, but basically

what I've done here is I've just pasted all this stuff in. Okay, I'm going to press enter. And I'm

not going to read this whole prompt to you, but this is basically, you know, act as an elite, award-winning creative developer and digital generative artist. Your task to write a single self-contained executable file that renders an ultradetailed pixel perfect and breathtaking hero section for a next generation tech company. Critical constraints, do all this fun stuff.

Here's the theme and the content. You know, provide some information about what I want and stuff. And stylistically once we have this set up um you know I'll make some minor modifications to

stuff. And stylistically once we have this set up um you know I'll make some minor modifications to it so it's not a one to one clone or rip of this uh and then we can actually move on with the app.

Now while I'm doing that just to save on time I'm going to voice dump everything that I think this app is going to include. Um and then I'm going to send it over to claude code so that I can have two of these instances operating simultaneously. One that's probably a little bit better at architecture design than the other that you know is better at the front-end design that I'm asking

for. So, uh, I'm not going to repeat it all over to you guys, but a I want to design an application

for. So, uh, I'm not going to repeat it all over to you guys, but a I want to design an application that takes a single piece of pillar content and then immediately rewrites it, regenerates it, and recreates it, and then syndicates it across a variety of platforms. Okay? And I just gave that over to Claude Code, and I asked it for a spec, which is basically a highlevel description or

overview of what this app would look like. And I just want to run you guys through this here while Gemini is designing the actual generative part. So this includes tech stack um app architecture some info on the database schema some info about the landing page and marketing site.

So after we're done with this, we'll use this to modify it. Pricing and Stripe integration, authentication and signup flow, onboarding flow, the actual content syndication engine, uh info about the dashboard, the content library, AI configuration and voice model, scheduling and calendar, analytics and reporting, settings and account management, API and webbook architecture, and then also some direct platform publishing and then AI video generation stuff in the future,

which basically we're just going to like add stubs or little nuggets that we could use to build that out later if necessary. I've then given it some information on the text stack and then asked it to come up with some other things. So for instance, we're going to use Next.js15. We'll use Tailwind CSS plus the Shad CN/ UI component library. We'll have Superbase Realtime for live updates. We'll

we'll do a bunch of other stuff as well. ZOD validation. This is important for security cuz I asked it to make sure that it was as secure as possible on the first shot. What I'm going to do is I'm just going to modify a couple of the pages here. I'm probably not going to use a calendar.

Okay. Analytics look good. Um platform connections for now. I'm just going to leave those out.

Um, AI voice prompt configuration is good. So, I like this. This is like your tone of voice.

Just make sure that gets that in right. And then settings, account, billing, and team. All that

stuff looks good. Here's like the data objects. I don't want to spend too much time on that, so I'm not going to worry about it. Um, that looks solid. On the right hand side, it looks like this generative component has now been done. So, that's pretty sexy. Now, it's going to go design the rest of the website. While we're looking here on the lefth hand side from cloud codes,

uh we have a bunch of different feature sections. The landing page pricing and stripe integration is going to start at 19 a month or 190 a year. So it's going to be 10 months basically giving two free months to people. Of note, just before we do this, the input method is really clean. Um I asked it to be able to either paste raw content. So just copy and paste a blog post, article, a transcript,

or a series of notes, or paste a URL. And the whole idea is, you know, if we paste a URL, um it's going to go through and then scrape the whole website for us. So we didn't even have to touch any of that. Um, additionally, I want to be able to do things like paste a YouTube video, although I think right now I'm probably going to leave that out just uh as the demo. And then

once I have those core functions and features in, then I'm going to do more. But you should also be able to upload things like MP3s, waves, M4As, OGs. Um, all these things should be auto transcribed. And the idea is it's just going to be like your one-stop shop portal for like, hey,

transcribed. And the idea is it's just going to be like your one-stop shop portal for like, hey, I just produced a piece of content. I'm going to plug this in and then I'm going to have copy and pasteable ready content to distribute to all these different platforms with minor adjustments. And

obviously, I'll also be able to like change the prompt anytime I want. Um, so very valuable for me. Hopefully it'll be as valuable uh for other people as well. Okay, very satisfied with the

me. Hopefully it'll be as valuable uh for other people as well. Okay, very satisfied with the first iteration of this landing page. As you see here, there are some issues with this WebGL stuff, but these are real particles that are being rendered um in real time. Um I don't like how this neurallex stuff is all over the place. Obviously, that's that's okay. I've since told it to slow

things down a little bit, but yeah, I mean like the text on the left hand side of the page looks really really clean. Obviously, we have like nice little mouseover buttons and and stuff like that.

Um, I'm going to change all of this signap stuff to uh Splinter, but for now, I mean, Gemini uh 3.1 and you know, prompts from Mr. Leon Lynn over here are absolutely crushing it. So,

pretty stoked and looking forward where and looking forward to where the next uh step goes. After the next round of edits, we've also added some additional sections. Common questions,

goes. After the next round of edits, we've also added some additional sections. Common questions,

ready to syndicate, and then finally down here, um, a full- length footer. So, that's looking pretty sexy. The lines here are still moving around a fair amount. So, I'm just going to modify

pretty sexy. The lines here are still moving around a fair amount. So, I'm just going to modify them a little bit more. But, we've now implemented some sort of like mouse um interactivity. Do you

see how this thing is kind of like moving away from my mouse as I move around the screen? So,

I can technically control this. It's just it's not super uh what's the term? Trivial

or obvious to me as a user of the app how this works. I've also had it change these lines. So,

that's going to slow down pretty significantly. And then we can see what the final product looks like. While I was waiting, I also had it go do a little bit of research on other platforms. So,

like. While I was waiting, I also had it go do a little bit of research on other platforms. So, Repurpose.io lately, Constant Studio, Buffer, and so on and so forth. And then why Splinter will solve it. So most are distribution only or creation only. Splinter will do both. Basically,

it'll allow you to both create content and then distribute it quickly. Um voice and tone being an afterthought here. We're going to fix that via um some pretty strong prompt engineering. I

think most people that are designing these sorts of repurposing apps are more software engineers than they are prompt engineers. I would consider myself much more prompt engineer than a software engineer. So that should allow us to get like very high quality tone. Okay, these particles

engineer. So that should allow us to get like very high quality tone. Okay, these particles are looking a lot better. They now move according to my mouse, which is cool. And then these little um things are no longer facing the opposite direction. I'd say they're probably a little too many of them. So, I think I'm going to remove the entanglement ratio here just so we have three.

And then I'll probably also just adjust the color of the particles a bit. So, you know, it's I don't know, like kind of lightish yellow, maybe goldish, something like that. Also see if maybe I can make the particles just a little bit bigger. Right now, I feel like they're kind of compressed, which I'm not a fan of. still is kind of neat just seeing this little streaming animation. Pretty

interesting seeing the logic and kind of the math that uh ended up aggregating all these things together. I mean, I'm just moving my mouse around and there's clearly a deep relationship here,

together. I mean, I'm just moving my mouse around and there's clearly a deep relationship here, but I can't exactly figure it out. I think that's because they're modeling this in 3D instead of 2D.

Becomes a lot simpler when you see them in black like this. There's definitely some 3D going on here as we could see. And honestly, I think I like the black. Um I like the 3D translation. So, I'm

just going to keep it at that. All right, awesome. So, now that we're done with this, um, now I'm just going to modify the content on this page. And I'm just going to do it by giving Gemini the rest of the instructions and saying go for it. Um, you know, we're going to want to clean out some of the

contacts and stuff. Uh, but I'll show you guys what that looks like. So, I'm going to say to adjust the copy on the page to match the purpose of the app, which you can find in this side of this spec. I'm not actually going to like manually do any of this. And then it'll go through and then

this spec. I'm not actually going to like manually do any of this. And then it'll go through and then just adjust the rest of it. And yeah, I didn't actually realize, but this is this is definitely like a portal that we are moving through in 3D space. So, it's actually more complex than I thought it was. Looks clean to me. We now have everything here set up. All of the syndication

text is in now. Um, it's still saying synapse, which is kind of annoying. I don't think it got to that. Cool. Good to go. So, let's build the rest of the app now. Um, for us, it's going to be as

that. Cool. Good to go. So, let's build the rest of the app now. Um, for us, it's going to be as simple as just sending all of this information over to Gemini and saying, "Excellent work.

I'd now like you to build the rest of the app as detailed in splinter_spec.md. But there's one change. I'm going to say along the way document each update in an updates.md file so that we have

change. I'm going to say along the way document each update in an updates.md file so that we have a history of tracked changes in case something occurs or I need to feed this into another version of the model of Gemini. And the reason I'm doing this is because this is a pretty crazy long app,

right? There's a fair amount that's going on here. Um, I anticipate I'm probably going to run out of

right? There's a fair amount that's going on here. Um, I anticipate I'm probably going to run out of tokens at some point because I ran out of tokens about an hour and a half into the development of most apps so far. What I want is I basically just want like a list of everything that it has done

up until the time that it did not do the thing. Um, and I'm just going to store it in a file that I can then give to either another version of Gemini later on or clawed Opus 4.6 or whatever the freaking model I want. And in this way, this is almost like a GitHub um repo before I get all the pushing logic and stuff in. But it gets to take advantage of AI summarization features. So

I'm not going to have to load the codebase every single time. I want to like analyze and you know see what the problem is. This section cracked me up a ton because I don't know if you guys have uh seen the draw the rest of the owl meme, but basically it's like how to draw an owl. Draw some

circles. Draw the rest of the freaking owl. Um I feel like we've just done this so far and it's doing that. So, thank goodness for AI, huh? This initial implementation plan is going to be heavily

doing that. So, thank goodness for AI, huh? This initial implementation plan is going to be heavily modified since we're no longer just building a one kind of uh file uh website. Instead,

we're going to be distributing some of the stuff across big file structure. Here you can see that it's also set at the updates.m MD, which is quite nice. So, we're going to see technical decisions, feature implementations, and significant changes applied to the Splinter project. And my hope is by doing it this way and then later on feeding this to um you know claude I can have both of these

models both claude code uh sorry claude opus 4.6 and then gemini 3.1 pro high basically like debate about which features are better which things to keep and then which things to remove. Agent

teams in cloud code does a variation of this right now where basically they have like a shared chat file and then they chat back and forth. Um, this updates to me is just a slightly more streamlined version of doing that without me having to waste $400 in tokens cuz boy does that agent teams feature consume a lot of them. All right, so it's built the MVP implementation plan. Just

taking a quick peek through this. This is going to need everything here, which is fine. Hopefully,

we are very used to getting all those API keys now. And yeah, we're going to initialize Nex.js directly inside of this root directory. So, it's going to do all of these steps here. Oh,

hold on. I see that it's not actually taking that into account. I'll say initialize in the same um folder as root hero.html will be our landing page. Just want to make sure that's super clear. And in

this way I get to pause the outputs. I'm not going to waste a bunch of usage on you know building it out and so on and so forth. That's where taking a peek especially initially at what um Gemini is doing can be pretty valuable. I always liken this to sort of like a trajectory sort of thing. Let's

say over here is um I don't know South America, okay, on the left hand side and then over here is the westmost coast of Africa and hypothetically you are a boat trying to make it from one side to the other. And so this is you, right? And then your goal is you want to go over here. Well,

the other. And so this is you, right? And then your goal is you want to go over here. Well,

logically speaking as you are leaving the port on the eastmost side of South America. Okay. Um there

are a lot of different directions you could go. You go this way, you go that way, you go this way.

only a very small subset of these directions will actually get you to your goal. Obviously, you're

going to need to go like here, right? And even then, I'm a little bit off. And so, initially, I guess what I'm trying to say is the direction that you pick even in like the first kilometer as a boat heading to to to sail is really really important for determining the final placement of the app. Um, even if I was like one tiny little degree off, that could be the difference between

the app. Um, even if I was like one tiny little degree off, that could be the difference between me making it directly on target and then I don't know like a one degree difference or something could be the difference between me making it to city that's like 100 km away. And so I usually like to be around here to steer the model and then once it's sort of like in this territory

or whatever, you know, if it's like on track well enough that I think it's like going to be okay, then I don't really worry too much about that. Now on the right hand side here you see that the error um the agent actually ran into an error. This is another reason why I like being around. This can

occur for a number of reasons. This could occur for token issues. It could occur because I don't know like the API is just out. It could occur for rate limiting reasons or just because sometimes um some of these packages don't actually interact nicely with Gemini and then it kind of struggles with the terminal. But yeah, I'm just going to be around for the first couple minutes for

a build that this is this comprehensive because I don't want it to like make a wrong assumption and then build something completely different to what I want and then later on I'm just going to have to go back and and redo it all anyway. Okay, you got the app right over here. So, it's looking pretty sexy. If I click get started, we now can sign in or sign up. So, I'm just going to pretend

pretty sexy. If I click get started, we now can sign in or sign up. So, I'm just going to pretend that I've done all of that. Now, we have the onboarding. So, initialize workspace. Cool. So,

this is like all the platforms that I'd want to connect to. It's good. This is really interesting.

Formality index, humor coefficient. I like that, but I think we're going to have to add some to it.

So, I'm just going to go back to the model and then I'll say change voice profile to a default um to an advanced advanced setting advanced let's say button where I can modify the prompt directly.

That looks pretty cool. Dry run simulation. Hey, what's going on? Execute run. This is

going to be like when it actually does its thing. Cool. Also add a um an additional step right after the dry run that shows the output. I'll wire you up to Claude Opus 4.6.

So we can test this next. Okay, we're now going to enter the dashboard. Okay, so this looks like a pretty simple dashboard still. I do like the style we have. We're going to build out, you know, a generative interface. It says over here. I'm probably going to want to move this stuff a little bit over to the left. I'm not seeing anything under generative engine,

voice profiles, platforms, or settings. So I guess right now we have the onboarding all the way up to the dashboard. So that's pretty cool. Still, if I click log out, I go back here. Then

if I go back here then uh Okay, cool. So yeah, I think I'm understanding where we're at with this.

Uh it's looking pretty clean and I'm glad that I managed to do all that stuff with just a little bit of prompting. We still have that cool little 3D thing, too, which is really nice. Okay, so next up, I'm going to feed in these instructions and then I think what I'm going to do is I'm going to have it continue the initialization. Um this is going to be tough. I mean,

I really like this. I really, really like this, right? But this is going to be pretty tough. Uh,

I guess we could probably autogenerate a prompt that includes some settings with this for the sliders. We'll use this in a prompt to fill variables like formality and humor.

And then this dry run simulation. We'll execute the input. We should get a new one here. Systems nominals. Cool. Awesome. Okay, cool.

one here. Systems nominals. Cool. Awesome. Okay, cool.

Let's also start building out the dashboard. I'd like you to replicate the attached image in terms of content. Now, I'm going to go to dribble over here. I'm going to go dashboard and let's see what we can do here. I want something that's just like much higherend,

cleaner. I do like the squareer look. Um, to me that just implies like a high-end brand. So, I'm

cleaner. I do like the squareer look. Um, to me that just implies like a high-end brand. So, I'm

going to look for something that does have that square look. Let's try filtering by new instead of um popular. That way, maybe we can get things that other people haven't built before. Okay,

um popular. That way, maybe we can get things that other people haven't built before. Okay,

this looks pretty clean. I like this. Let's see if we could feed this in. Oh,

sorry. We need to copy this. We can't just do that. Okay.

uh in terms of content and style except I want you to stick to our pre-established um square no border radius. That's the little um smooth corners. I don't really like that.

I also want you to add significantly more functionality as per the initial doc initial splinter spec.md. And this is looking pretty clean. There's an advanced settings feature

splinter spec.md. And this is looking pretty clean. There's an advanced settings feature here now where we can actually change things which is quite nice. I'll pretend I'm executing a run running style transfer. Okay, great. Awesome. So, this looks kind of silly. Not a fan of the design

for sure, but um you know, it's cool that it has a lot of the stuff laid out. Interesting. Yeah,

this is like highly opinionated stuff clearly. Um all right, so I think what we're probably going to want to do is on the left hand side, we're still going to want to have like a like a database, sorry, database dashboard panel. Um we're not going to want to mention the model. I do like the system log. That part's cool. All right, cool. Let me just give this some stream of consciousness

feedback. Hey, this looks cool, but it's quite opinionated. I don't like the dark borders. I'd

feedback. Hey, this looks cool, but it's quite opinionated. I don't like the dark borders. I'd

like a higherend sort of Lux design internally that still sticks to um very similar to the design on the landing page. I'd like you to remove all mentions of the specific models that we're using.

I want some sort of lefth hand side pane that I could use to select different views. I really,

really like the system log. I like the credit usage, the generation, source items, active platforms. These are fine. replace recent archives with a graph. That graph should go really in-depth on the number of generations and which platforms we've connected and stuff like that.

We also need the rest of the app. So, I need a way to see specific and individual generations. I also

need a way to create a new syndication. Right now, when I create when I click create new syndication, it takes me back to the wizard. But I want this to take me to a page where I can insert content either using URL or MP3 file upload or video upload or paste in a bunch of text and then it'll do the syndication for me. Remember, we're just dry running all this stuff for now. Uh I'm going

to include some API credentials for anthropic in a second. So you could hook up the cloud opus 4.6 six integration and change the rest of the language on the actual app side to reflect like normal app usage. For instance, I don't like the term disconnect. I don't like the matrix. Um

I don't like, you know, some of the other language that you're using here. It seems a little too tryhardy. Okay, after about 40 minutes of development, we did run out of tokens. But

never fear, that's one of the reasons why we're using two models and not just one. So what I've done is I've exported our conversation history and then that updates file. And now I'm just uh doing next steps which in my case involves feeding in the enthropic API key. So I'm going to go and find the anthropic API key here. I'm going to call this uh for splinter. Then I'm going to

copy it over right there. Okay. And then what I'm going to do is I'll say let's wire up Claude Opus 4.6. Test a bunch of prompts. Give me a few uh a few dry run examples. And then I'll pick the ones

4.6. Test a bunch of prompts. Give me a few uh a few dry run examples. And then I'll pick the ones I like the most. Let's say test 10 prompts. Give me a few dryr run examples of befores, afters, and I'll pick the ones I like most and we can integrate them. In general,

the design quality of Opus 4.6 will be a little bit lower. So, just keep that in mind. However,

um there are some other trade-offs. You know, it's a little bit faster and then addition to being faster, I think architecturally, it tends to make like a better functioning application. So,

that's why I frontloaded the design with Gemini. And then after the design and stuff like that was all wired up, I did all like the little scripting or I'm doing all of the little scripting and backend passes with um you know cloud opus 4.6. This database is now set up. So I can head over to let's do two things. Under authentication I just want to go to sign in signin providers and

then I'll remove that little confirm email step and then under project settings I'm going to go to API keys just so that this has all of the keys that it needs in order to you know do whatever it wants. So I already gave it the publishable key. We'll go um superbase secret API key and then I'll

wants. So I already gave it the publishable key. We'll go um superbase secret API key and then I'll paste that in as well. And the idea is now it has everything that it needs in order to manage the Superbase instance for me. I don't really need to be involved in this process at all. And I'm doing this while Claude is basically just running a quick little test on the prompts. I'm just

going to pick the best prompt for now and then I'll worry about like optimizing the hell out of it later. Okay. And whereas anti-gravity was using its own built-in browser, uh Claude Code typically

it later. Okay. And whereas anti-gravity was using its own built-in browser, uh Claude Code typically uses Chrome DevTools. So that's what it's doing right now. jumping on taking a screenshot and then it's seeing an internal server error. So whatever it did either didn't compile or there was just some problem on the back end. Um so that's what it's fixing up now. As you can see the syndication

page here for create is much lower quality. Um and as mentioned you know cloud is just nowhere near as good as Gemini at least as of the time of this recording and designing those really high-end uh looks unless it's like per perfectly basically trying to duplicate functionality which is unfortunate. Um, it is going to make some minor changes here because it it can't actually click

unfortunate. Um, it is going to make some minor changes here because it it can't actually click this generate button. So, it's cool that it can kind of run that testing loop on its own, but all of this is just in contrast with Gemini's high quality design. And it looks like it created a LinkedIn post and then also an X and Twitter post. Just taking a peek here. It took us 3 years

to hit 1 mill AR with our SAS product. Here's what actually moved the needle and what didn't. So,

this is a um phrase that I explicitly said that I didn't want in the prompt. So, obviously,

I'm going to have to do some adjustment there. We sell to dental practices only dental practices.

The temptation to go horizontal was constant, but saying narrow am meant we could out build and outmarket anyone in the space. We charge more than felt comfortable from day one. Honestly, the price anxiety never fully goes away, but underpricing would have killed us. Okay, just while we have this, I'm going to go back to the actual page. Make sure that nothing else was changed here.

Cool. So, the design here is quite nice, right? Hopefully, we can we can see that. The question

is where do we go from here? Get started. Sign up. What's the wizard looking like? Okay. Okay. And

then we're going to have our prompt here. Try run simulation. Sure. Oh, is this now actually using real cloud code? No, it's not. Okay, cool. Uh, sorry. Um, Opus 4.6. We'll sign off. Enter the

dashboard. So, the dashboard here is looking a lot simpler. Um, you know, we we're missing a fair few of those cool design features that we had before. And then we also have little rounded corners which I don't like. So, I'm just going to dump a bunch of instruction into Claude and see if it can solve

this. Hey, I want the design of the dashboard to reflect the design of the landing page. Right now,

this. Hey, I want the design of the dashboard to reflect the design of the landing page. Right now,

there's a very big discord between the two. Notably, the corners are rounded in the dashboard and not rounded everywhere else. There's also color discords. We're using this soft purple, which uh is correlated with which is typically associated rather with LLMs. I don't want pill style things anywhere here. And in general, I want you to use the same fonts in the landing page for

the new syndication or create page. I like how we've laid this out so far with the URL, file, or paste text, but rather than have three buttons that the user has to click, I just want them to be able to do it um do all of these simultaneously. So, just have one field inside of that field allow users to either paste text, import a URL, or upload the file. It'll eliminate some complexity,

keep things really streamlined and simple. also allow them to select which platforms they'd like to syndicate content to at the bottom. Right now, the generating for button, generating for section rather, doesn't allow us to um make any of those changes. Finally, make sure that the app looks similar to the landing page. As mentioned, it's very important that we get this one right. Oh,

this is much better. Okay, as we see here, we now have that perfect design unification. I

like the new syndication button up top. Um content library, votes, profiles, analytics, config, and API access don't fully work yet, but this looks a lot cleaner. So, we paste a URL. or drop a file or type our content here. If I go into my finder, if I go into my finder and drop it, does that work?

Oh my goodness, it does. That's really clean. Likewise, if I paste a URL, so I don't know.

Let's do this one here. Okay, for my big claw code course earlier and paste that in. Does that work?

URL detected. Really clean. Okay, we also have blog x, Twitter. Okay. Okay, this is much much nicer. Thank goodness. Um, obviously this is going to be difficult to see the differences

nicer. Thank goodness. Um, obviously this is going to be difficult to see the differences between these lines. So, looks fantastic. Let's add mild differences between the lines on the generation throughput graph. I also want to build out pages for content library, voice profiles, analytics, setup, and API access. So, work all of those out. Add uh whatever relevant features make

sense. And if there are any additional features that you think would make sense on the lefth hand

sense. And if there are any additional features that you think would make sense on the lefth hand side panel, please add them. I'm uh attempting to increase the at least perceived sophistication of the app right now. Okay, I actually just stepped away to grab myself some breakfast and came back and it looks like Claude is still monkeying away at this. It's been probably 30 or so minutes.

I've had very little actual hands-on involvement and uh yeah, you know, like the agentic workflow time horizon of this specific model tends to be quite large. Um, I'll say Gemini actually has a slightly longer one, but when you prompt it right, where essentially you say, "Hey, here's a big road map of things. Here are a bunch of changes that we've already made. Here's the

uh whole spec of the thing that we ultimately want to build." And then you just let it run loose. It

can operate quite independently for quite a long time. Um, and so this has gone through I think three or four context windows at this point considering it's about 200,000 or so tokens. You

know, I've spent a few million tokens um using the cloud or anthropic API. That's multiplied by fast mode here. This sort of approach isn't the best for everybody because of costs, but in my case,

mode here. This sort of approach isn't the best for everybody because of costs, but in my case, I'm happy to trade off that cost for um time as previously and will continue to do. Checking

back in on the app, it's looking significantly more fleshed out. We have a content library up in here with the actual posts themselves. We can go grab these posts and do something we wanted to. There are voice profiles now. Um there is a brand voice, casual, blog. You can adjust that

to. There are voice profiles now. Um there is a brand voice, casual, blog. You can adjust that using this little section down below. You can also add writing samples for best results which will improve the probability that an AI model actually outputs what it is that you want. Generation

volume right over here along with tokens used, average numbers per session, platform breakdown, everything that I basically like talked about in the spec. Finally, automation rules. So,

um this is like a workflow thing where you can automatically syndicate new content. Basically,

every time you add new content, it'll automatically go through a big flow. We have

like enabled and and disabled and stuff like that. Right now, these are all just stored on the local database. um it's left to be seen essentially whether or not I could scale that up. We have

database. um it's left to be seen essentially whether or not I could scale that up. We have

profile platforms. This is where I can connect and disconnect and so on and so forth. And ideally

this would open up a little like connection panel. And then uh you know we have notifications supposedly throughout email with the ability to export all data. And this is really the section that I'm I'm the most excited about because uh you know if you make your apps like agent compatible via API um I think that's going to be a massive market later on. So, what I've done is I've added

an API access section with like supposed production keys and stuff. This isn't fully fleshed out, uh, as I'm sure you can imagine, but still pretty reasonable. Um, what I'd like to do next is basically want to verify that all this functionality works and and actually like does what it is that they imply that it does. And so for this, I'm probably going to use a distributed

um cloud code either agent team or I'm just going to ask it to run through one by one by one. The

idea would be, you know, spin up a se separate instance to test the API key while you're spinning up a separate instance to test the notifications while you're spinning up a separate instance to test the automation rules. We'll see how all that stuff goes. Hey, this looks fantastic.

I don't think there's anything else here that I really want on the app. Um, maybe on the dashboard there is a little bit of white space at the bottom because the system log is just just a little too long compared to the connected destinations. I think we could probably fix that by adding one additional row of connected destinations. That'll um match everything up quite nicely.

Everything else looks really great. My next desire is to test this end to end every specific feature.

Just going through a really simple setup here for LinkedIn O because I want to verify that this actually works. So, uh, we're going to add a couple products to the app. So, share on LinkedIn, we have to do this. So, request access. We also need, um, sign in with LinkedIn using open ID connect. So, I'm going to request access to that as well. And the good news is, you know, you don't

connect. So, I'm going to request access to that as well. And the good news is, you know, you don't actually have to know how to do this yourself. This is just stuff that uh in this case Claude, but Gemini as well can just walk you through. Then under OOTH 2.0 settings, we need to add this redirect URL. So I'm going to go up to O. Just going to grab the authorized redirect URLs. And

redirect URL. So I'm going to go up to O. Just going to grab the authorized redirect URLs. And

then I'm going to paste this in. And then I'm also going to copy both the secret um into this ENV file. And then I'm going to uh okay, added restart dev server etc. And then when this is done,

file. And then I'm going to uh okay, added restart dev server etc. And then when this is done, I need to go to setup platforms. Connect LinkedIn. Okay, cool. So, I'm now going to check out what's going on over here. We'll mock. We go to setup platforms and then connect LinkedIn. This is going

to open up a little LinkedIn dialogue. I'm then going to sign in using my own credentials. Okay,

now I have a phone number that I have to verify. So, I did just get this. I'll type that in.

Now I'm going to sign in as myself. Cool. And it looks like LinkedIn status is now connected. I'm

going to head back over here and say connected just fine. So we should be fine with this. Um

find some way to store all of that info so we don't need to reconnect next time. All right.

So, we just did this um you know with with LinkedIn. So, I should be able to go to new syndication now and then I don't know. Let me just like find an actual post that I made before. Maybe

my my blog. It's a good source for this stuff. What's a fast one right over here? Actually, let's

test this functionality. We'll click generate. I don't know if it's actually feeding in this. So,

that'll be the tough thing, the thing to double check. We are on a generating tab. It's a fair amount of content. So, you know, I'm not expecting it to finish basically immediately. Oh, also we're syndicating to LinkedIn supposedly. We should have like a final check before we actually publish it.

Okay. Okay, cool. So, it's double checked to basically see whether or not we're connected.

And so, X doesn't have publish, but LinkedIn does. Most business small business owners are terrible at hiring. Honestly, it's not because they're bad at business because nobody teaches you how to do

at hiring. Honestly, it's not because they're bad at business because nobody teaches you how to do it properly. Biggest mistake, hiring based on gut feeling instead of actual data. You meet someone,

it properly. Biggest mistake, hiring based on gut feeling instead of actual data. You meet someone, they seem sharp. Cool, cool, cool. All right. Uh, we still have some issues here. So like I don't know hashtags. Nobody uses hashtags anymore, buddy. Remove that. Explicitly add it to the

know hashtags. Nobody uses hashtags anymore, buddy. Remove that. Explicitly add it to the prompt. Uh we should never generate any sort of hashtags. Also, I'd recommend against emojis in

prompt. Uh we should never generate any sort of hashtags. Also, I'd recommend against emojis in general. And then let me see what are we doing that is sort of unfortunate. Most small business

general. And then let me see what are we doing that is sort of unfortunate. Most small business owners are terrible at hiring. And honestly, it's not because they're bad, but it's the biggest mistake. Okay, so we have to avoid um LLM isms. Like essentially the main LLM writing pattern

mistake. Okay, so we have to avoid um LLM isms. Like essentially the main LLM writing pattern that pushes it into uncanny valley territory is when you jump between extremely short sentence lengths and then long sentence lengths and then do that over and over and over again. That's not

how most human beings will write unless they're trying to be direct response copyriters. And for

the most part we are we are not. So find a way to adjust the prompt. Cool. And then everything else looks pretty good. So I should be able to actually like push this. Um, thing is I don't really want to because then I'm going to have to publish this on my own LinkedIn, right? Ah, I guess we're going

to have to test it. All right, why don't we go to another page here and then just verify whether or not this is being published to LinkedIn around personal profile. If it is my personal profile, I'm just going to delete it basically immediately because I don't want all my all my fans to see that. How do I do this again? Good god, man. Okay, here we go. And we should be able to right click,

that. How do I do this again? Good god, man. Okay, here we go. And we should be able to right click, press delete post, right? Okay, cool. Okay, just ran into one issue right before I did this. So,

I'm just going to Oops, that's not what I wanted to paste. Um, I wanted to paste this. There

you go. So, we ran into a problem just as I was about to do this. I I don't know if it like out um just ran out and sort of timed out or something, but okay. There we go. There we

go. That's better. Okay. And now we should be able to go to dashboard. I would hope anyway. Okay. It

is going to force me to do this signin flow. We do have some more platforms here as you could see. Fix the onboarding wizard as well. It should now um function off of live data. Right now it's

see. Fix the onboarding wizard as well. It should now um function off of live data. Right now it's just doing the basic pass with templated stuff. Okay. Setup. All right. All right. Here we go.

Content library. Go back to new syndication here. Go drive blog. Why don't we get something maybe a little bit shorter like this. Paste that in. Click generate. We'll exit out of X Twitter so that we only have the syndication option for my LinkedIn. Then we will go to my LinkedIn and then see if we could actually publish this. This is a blog post I wrote basically all about interacting with my

YouTube comments. I said uh you know the statues that we are building aka our YouTube comments last

YouTube comments. I said uh you know the statues that we are building aka our YouTube comments last way longer than the statues that people throughout history have built because we don't know if people are going to be looking at these comments in the year 2148 and the year 20,048 or what.

So there's a lot of potential life there. Okay. Clicked publish. Refreshing. Not seeing a post, which is good. I just clicked publish. I'm not seeing a post on the LinkedIn. Uh,

let me just on the generated content. Really helps to be hyper specific. Did this copy work? Yeah,

the copy worked. Okay. So, just want to double check. Going to refresh this. And then I'm also going to head over to left click and see maybe if we published it to there instead. I should be able to pull this up just by going back to the LinkedIn page. Four left clicks. So, I can click on that.

Go back to the company page and then we'll go page posts. Okay. I'm not seeing a page post here, which is nice. Oh, wow. 675 followers. Did not have any idea 675 followers in that company page.

That's funny. Looks like there was a specific issue with how we pushed this, which is okay. So,

we're going to use actual API generate calls now. And then I have the post right over here. Just

going to head right over here. Click publish. Not seeing any sort of notification. That's an issue.

So, I'll head back to Cloud Code. I'm not seeing any sort of notification after I click publish.

Honestly, the experience doesn't feel very snappy to me. I think the cursor might also be uh reason why. Find a way to just improve the perceived customer experience when they click that button. Whatever it is, toast, menus, and whatnot. We'll go back here. I'm just going to

that button. Whatever it is, toast, menus, and whatnot. We'll go back here. I'm just going to quadruple check. Make sure I didn't. Did I post? No, I haven't posted. And then I'll do the same

quadruple check. Make sure I didn't. Did I post? No, I haven't posted. And then I'll do the same thing for leftclick. Let's go leftclick LinkedIn. Just double check that that didn't post to either.

It might have. Just unsure if I'm posting to company pages right now or my own. Okay, doesn't

look like I'm posting to either. One thing I'm seeing here is we actually have been storing these in the database now, which is cool. Um, our local database to be clear, but still a database. And

so, you know, we can copy this. We could post this to LinkedIn and whatnot if we wanted to manually.

Um, but I do want to check to see whether or not we could post u specifically like uh, you know, using that flow that we we showed you earlier. So, I'll go back to new syndication. We're just

going to do one more. Okay. Yep, we got it. I got to delete the hell out of this thing ASAP, please. Thank you. And uh yeah, we've just verified that this actually does post. So,

please. Thank you. And uh yeah, we've just verified that this actually does post. So,

fantastic work. That's incredible. Um, super cool. Super cool. I'm going to go back here. Hey,

I tried publishing and the first time I clicked it, nothing happened. I waited five more seconds and then I clicked it again and that time it went through the whole publishing loop and it actually appeared on my LinkedIn. Diagnose why this might be the case. Go ahead and fix. Another

cool feature is in the top rightand corner we have a new. So I can actually just click new, go back here and then do another one. Um and then I can also store all of that as you guys saw before inside of the content library along with the specific generation for that um rung. So

that to me is really really neat. Also the fact that we have sort of the ability to go listical view is cool. You can tell that this really ran with the spec that I gave it and it's um it's done a good job. I don't know. Okay, cool. Yeah, even the search works. So very high quality stuff here.

I'm going to head over to voice profile and see if I could maybe set this as the default casual blog, do some editing and just double check what's going on. So, as you can see, we can select these here. Um, I don't know. Is there any way to like go deeper into what the actual prompt is,

these here. Um, I don't know. Is there any way to like go deeper into what the actual prompt is, though? I'm not seeing that. I'm just seeing like the ability to calibrate formality, humor,

though? I'm not seeing that. I'm just seeing like the ability to calibrate formality, humor, and emoji usage. So, I think I'm going to have to add that feature. Hey, under voice profiles, I'm noticing that we can calibrate formality, humor, and emoji usage, but I don't see any way to adjust the actual prompt itself. What I want you to do is to add just like we have in the wizard

some sort of advanced drop down that I can click on that allow people to actually modify the uh the underlying text as well. Under analytics, I want you to make sure that we are actually reflecting real analytics. Uh right now I'm not sure if we're pulling from our database or what's going on. I do

real analytics. Uh right now I'm not sure if we're pulling from our database or what's going on. I do

see that the recent activity here is updated with the LinkedIn post, which is pretty solid, but I want to make sure that everything else is good, too. Finally, under scheduling, um verify and test that this works for LinkedIn. It looks like we have a scheduled post coming up. That said, I don't want you to actually publish it on LinkedIn. Um, I just want you to verify that everything

works up until that point. I've now been given this initial schema. What I'm going to do is I'll head back to Superbase, go to the SQL editor, and paste this in. Just verifying that these comments work. Okay, it looks like they do. I'm now going to hold command and press enter. We're going to

work. Okay, it looks like they do. I'm now going to hold command and press enter. We're going to run this. And we see success. No rows return. I'm going to go back to Cloud Code. And it looks like

run this. And we see success. No rows return. I'm going to go back to Cloud Code. And it looks like my Gemini subscription is finally coming back. The rate limiting said it would be 1228. So, we have just another 10 minutes here before I can get back to that. Um, which I think I'm going to do for like a final design. But that should allow us to push through probably most of like the database

migrations and stuff. Superbase SQL added. You know, just to be clear, I don't like combining multiple um different models like while I'm in the middle of a development session because I like all of the context that Cloud Code has to be used in the cloud code thread and all the context of Gemini has to be used in the Gemini thread. generally speaking, you get much higher quality

results because uh this thing has processed so many tokens at this point. You know, has so many so much history of like past design decisions and stuff like that that it just inherently gets what it is that I'm trying to say. If I were to try and just have Gemini, hey, pick up where whatever left off, you would basically have to do the entire job of retraversing all of those failed paths. So,

we're going to push this through with cloud code and then at the end I'll probably do like a little design or redesign. Um maybe do some finishing touches, some some final polishing with Gemini.

Okay, so I'm going to say let's go 100% superbase and we should be good. And it just got back to me saying that the superbase migration is now complete. So it's also given me a summary with a bunch of API route os. It's verified the build and whatnot. Verifying the build to me is not enough.

I need to actually go through the whole testing um end to end. So I'm going to have it log in, put in some credentials, and actually like do said testing on its own because it has the ability to screenshot things and whatnot. Then once all this stuff is done, it's just a matter of pushing that to um you know actually like a like a like a Netlefi host and then also adding payments

and stuff like that. The reason why I'm not adding payments right now is uh I sort of had a change of heart. I thought a little bit about um what would Stripe require in order to set all this up and I

heart. I thought a little bit about um what would Stripe require in order to set all this up and I think Stripe would work better with like a live published app since uh it has like a fair amount of callback functionality and I want to be able to give it a URL. So I I'll do all that stuff after.

Anyway, I'm not touching anything here. Model is now proceeding autonomously and it's doing set testing without me. spotted a couple of issues so far with the voice profiles table. So, it's

going to go through and then actually apply the migration. I can see this doing a bunch of silly BS here trying to solve some Superbase issue. So, I told it just to give me whatever uh it needs and I'm going to go through and actually I can see this doing some silly BS issue. Um what I'm going to do is I'm just going to run this directly in the Superbase editor instead. It's saying

alternative install this via Homebrew to run it from here. I mean, like it can, but I don't know.

I don't really want it to waste my damn time or my tokens. So, I just created it. Um, should be good.

Cool. Yeah. And you can see I've already done the creation. So, we've saved ourselves some tokens there. I would hope. And uh yeah, I mean like that's why I keep an eye on it. Good mental model

there. I would hope. And uh yeah, I mean like that's why I keep an eye on it. Good mental model here is pretend you're at like uh some security desk job and part of your job is just like reviewing CCTV footage and there's like 10 CCTV things in front of you. You're just like kind of glancing around at each. It's basically what we're doing here. Although um you know with a little

bit less context switching since I'm using fast mode. But everything that I've done here, you can absolutely replicate with like two or three cloud windows open. The reason why I'm starting with GitHub first is because I want this to be version controlled. And to be honest, like you could have done this from step one. I just uh I'm not working with anybody else in this project. It's just me,

myself, and I. So this local folder is enough for me until I get to, you know, the part where I'm ready to go. You can see it's um looking to ask a question. Uh h I should probably do this privately because I don't want anybody to take my tokens. Cool. We'll do that after it's done.

um push to Netlefi. Use my credentials since we're just demoing. I'll remove

them later. And that way I'm going to have like my env keys and stuff like that so I can actually go through the uh the generation process and stuff.

Cool. So now it's setting up Netlefi deployment and then now we just need to connect to Stripe. So I'm going to head back to Stripe and then I'm going to open up that uh publishable key thing. So signing in should now open up a sandbox. So what I can do is I can actually copy the publishable key. Oh, that's not it. I'll head over to ENV and then I'll also say

Stripe publishable key. Add that. Also go Stripe secret key. I'll add that. And I realize it's probably going to have to redo the update. Hey, just a heads up. I've added Stripe publishable and secret keys tov as well. Our next step is going to be to connect it to Stripe to get our payment integration set up. I'd like you to handle this end to end autonomously. Once it's done,

um, I'll do an endto-end test of the app myself and let you know if there's any final changes.

Cool. So, we've since pushed this app live and we can actually see it at splinter-app.netlifi.app. I

don't really think I needed that dash app there, but the model made that choice and that's okay.

Um, I'm liking this. It also looks like we have that nice little I didn't really notice, but we have that nice little 3D geometric background. Um, we're going to have to find ways to insert these pipeline visualizations. I've realized now that we haven't done that on the landing page, but it shouldn't be too hard. I think we'll be able to sort that out pretty quick. I'm also

going to want to widen the landing page a little bit because notice how the hero header is really wide and then everything else is really kind of compressed. So, I'm just going to voice dump this and then um have it run through some final designs. Hey, the landing page looks solid.

Just checking the live Netifi link. Now, I'd like you to add more platforms and social proof. Um,

so just add more company logos and stuff. Aside from the hero header, I find that everything underneath is pretty squished. Like it's not very wide. It's very narrow. So I'd like you to significantly widen the design. Also, we have processing pipeline visualization, tone analysis, matrix, multi format, compiler. These three are placeholders that were meant to be filled in.

What I'd like you to do is actually go through our app and then fill this in with relevant sections.

um not screenshots, but actually just mini builds that uh elucidate various parts of the app, whatever the the specific feature is. Make sure to widen the pricing and then the call to action as well. And just in general make this a little bit longer and a little bit sexier. All right,

as well. And just in general make this a little bit longer and a little bit sexier. All right,

let's take a peek at that actual landing page now. We should have everything essentially ready. Oh,

that is so cool. I don't think I'm going to get over just how interesting it is to move my mouse around. Um, looks like we added significantly more context here. So, we could see these little steps.

around. Um, looks like we added significantly more context here. So, we could see these little steps.

And wow, that some of this is actually dynamic, which is wild. So, future content creation isn't about producing more. It's about distributing smarter. Here's how we scale our reach 10x without hiring a single additional writer. LinkedIn X, blog, whatever. That's cool. We can then actually move these things around. That's really, really interesting. Oh, wow. Nice. So, we can move the

emoji usage and stuff like that around and then add various features and and buttons. And this

over here has a bunch of different sections for different types of formats. Hot take. If you're

still copy pasting the same content across every platform, leaving 70% of your engagement on the table. Hell yeah. Threads. We added some more steps down here. So, clean. We then added some

table. Hell yeah. Threads. We added some more steps down here. So, clean. We then added some data. We added an additional pricing tier, which is nice. Creators love Splinter. So,

data. We added an additional pricing tier, which is nice. Creators love Splinter. So,

we have some supposed big creators. And then we can start our free trial or book a demo. I

don't know if there is a demo feature though. Is there? Yeah. Okay. So this is where we add our calendar. It's pretty neat. I'm probably not going to do the demo stuff. Um anyway,

our calendar. It's pretty neat. I'm probably not going to do the demo stuff. Um anyway,

that's fine. We'll start free trial. So now I'm going to add some context. So we'll go Nikki Sarif. Go Nick@niki.com. Actually, why don't we use a real email? We'll go a very simple password.

Sarif. Go Nick@niki.com. Actually, why don't we use a real email? We'll go a very simple password.

So the creating is now taking us to the onboarding. This is super clean. So maybe we just want LinkedIn for now. We're going to set up our voice. So move this around. Looks like we don't have access to that advanced section just yet. Let me see if I could pull something from my blog.

Maybe we'll say this. Paste this in. Then I'll click generate. We should go through a generation script here and it should be real. Okay. So the output is what you get in production. Nice.

Cool. This is now taking my post and then it's um iterating on it slightly. Wow. This

is great. Nice. Oh, nice. Yeah. So I think the the difference here and the reason why this reads so well is because I specifically told it do not have those crazy short sentences with like super long sentences immediately after and then alternating cuz it's like blah blah

blah blah blah blah blah that's not pattern that's signal right it's like you know that that's AI just the way that it writes it this has solved that for me which is clean okay nice anyway finish setup apparently we're all set so we'll go to the dashboard here okay And we ran into our first issue, which is an application error. So I'm going to paste this in.

This occurred right after the onboarding wizard. And now I'm just going to continuously push until I get all the way through the app. Now, logically, what we should do after we are done our little onboarding wizard is we should go directly to a pricing page. I'm okay with people making like their initial request that little LinkedIn rewrite thing without having

to sign in because while I know some people abuse that um the abuseness I think will be outweighed by the convenience and then the wow factor of actually just being able to pump content in and then getting it like nicely formatted and tuned for LinkedIn. So I'm going to keep that in. But

immediately after like we do want to force them to pay and at that point they'll be in a little bit of like reciprocity like they will just have used our app for free which allows us to say use for free and then in return um you know it's sort of like a like a teeter totter or a scale in return

they're going to want to balance that by paying us and then I think I'm going to like make the intro offer like pretty affordable so people can you know sign up get the ball rolling and stuff like that without necessarily having to spend a lot and then um from there you know as they go grow addicted to Splinter her then uh you know eventually the monetization will improve. Okay,

this looks pretty good. Nice. All right, so why don't we give this a little refresh here and see if our data is still in. Beautiful. So we have this. The thing is we don't have any tokens. So we

do have to ask ourselves how many credits. So free plan. Okay, so we can do five I guess in total, right? So maybe we'll go new syndication up top here. We can create content. But notice how we

right? So maybe we'll go new syndication up top here. We can create content. But notice how we don't have LinkedIn or Twitter. So, one more change I'm going to make is under Oh, actually, I guess that's to be expected because I selected LinkedIn and then that one X or Twitter does not have an API and then blog is manual. When I click new syndication, there's currently only LinkedIn

X/ Twitter and blog available. I'd like you to add all. We also need to force the user to connect at minimum LinkedIn and we need to do this post onboarding. To be clear, are we giving them five free credits as in five free generations? Another thing on LinkedIn is now that my app is live, we actually need to change the URL. So rather than being localhost 3000, which is what it was before,

we actually have to go back to Splinter and then type in this, not that, this. So that should now give us the right redirect URI, which now if I click on this, this will take us back here, which is good. So, I'm going to paste in this password, click sign in, see if I have to

connect via this. Okay, no, and I don't. That's great. I'll head over to dashboard here. Now, we

have one active platform configured. And um what else we should do is we should offer some sort of like notification saying, hey, connect an active platform. If a user has zero apps configured, then encourage them to connect to platform. Um, drip this out in various places throughout the app.

Okay, I'm going to add that here. And then I'm just going to paste this in, then click generate.

So now I'm actually going to run through and I want to see how this interacts with credits, right? We're not doing payments here. We're just doing um credits. It's your consumption.

right? We're not doing payments here. We're just doing um credits. It's your consumption.

Cool. This looks pretty solid. Okay, nice. So I can do that. Let's check and see whether or not this is actually going to work by heading back to my page. And then I'll also check my posts.

Then if I can make the post, uh I'm just not going to test it again. I'm just going to assume that this is going to work. Okay, it's saying published. Refresh. Okay, cool. So, I'm going to now delete this. That's pretty great. Uh posting functionality, which is the core functionality, clearly works well. Okay, going back to the dashboard, we now have one generation,

but no tokens have been consumed. So, we're going to have to fix that as well. I'm not seeing any credit consumption. I just submitted a request as a Okay, cool. So, credit consumption here hasn't

credit consumption. I just submitted a request as a Okay, cool. So, credit consumption here hasn't been fixed, but I do have this, which is nice. So, I have the whole post. That's lovely. Let's

um see if we can create a voice profile now. Okay. And then we can also adjust the system prompt, which is nice. Cool. Looks like there's a uh default system prompt here. And then there's also the ability to add writing examples. Nice. I really, really like this design. It's super clean.

Very brutalist, which is nice. As you can see, we have one data point. Um, it's picking up our time. So, 12:57 p.m. we submitted one, which is really cool. And then it looks like we've outputed

time. So, 12:57 p.m. we submitted one, which is really cool. And then it looks like we've outputed one LinkedIn post, but it's also writing one Xthread. Also, I only published this to LinkedIn, but it's telling me that I've also published an X thread. Perhaps we should just add more context surrounding output types in analytics so that they know that you have the option to

copy from Xthread whereas the LinkedIn post was actually published. Okay, heading down to scheduling here we could see a content Q. So this is the generation I can actually select uh something I have generated which is neat. So maybe instead of like publishing what you do is you just generate a bunch of things. You then select the specific platform you want. So in our

case LinkedIn then you can set the date using this cute little calendar. So, why don't I pretend it's 2025 0228? Okay. And then I don't know, we'll do 255 in the morning. That looks good. Let's

2025 0228? Okay. And then I don't know, we'll do 255 in the morning. That looks good. Let's

add to Q. Cool. And so, now we do have something coming up on Saturday at 255, which is nice. Now,

moving over here to setup. It looks like I can change my account details here. Let's just pretend I'm only saving my name. If I refresh this, you see that that does not persistent. The setup page doesn't save my account details when I change it. For instance, I changed my name from Nikki Sariah to Nikki Wiki. I press save changes and then refresh the page and there was no um context

there. I do like how under billing we do have uh both the free plan and then we have starter, pro,

there. I do like how under billing we do have uh both the free plan and then we have starter, pro, and business. So, that's nice. Then we have these little notifications and it looks like

and business. So, that's nice. Then we have these little notifications and it looks like they're toggling fine, which is good. I do wonder I don't think that this is 100% hooked up. So,

we'll have to double check that. We have the ability to delete an account. Oh, wow. Okay.

Okay. And that autodeletes. So, we need to set some sort of like feature that basically checks.

I just clicked delete account and it immediately signed me out. Make sure that there's some sort of are you sure message. Okay, that looks pretty nice. Okay, now I guess this is good for me. If

this actually did delete my account. Okay, no, it didn't actually delete my account. I see. So,

it just said that it deleted my account, which is unnecessary. Never mind. It just said that it deleted my account. It didn't actually do the deletion. Okay, now I'll generate new key example

key. Okay, and then we need the curl details. I'm just going to see if we could key here.

key. Okay, and then we need the curl details. I'm just going to see if we could key here.

Let's reveal this. And I'll say API key send a request to this URL using the format.

Let me see if it makes any sense whatsoever. API splinter.io. Okay, for the API request, it doesn't look like the domain is a live host. Um, update everything so that it reflects the new URL, not api.splinter.io. And then finally, we have this web hook feature, which uh I don't know,

not api.splinter.io. And then finally, we have this web hook feature, which uh I don't know, let's just go web hook test. And over here, we can copy a web hook URL. We

could basically paste that into our app and say, "Hey, when this is complete, scheduled or posted, I want you to deliver to this." So then I'm going to go back to content library. And then I'm just going to do one more. So I guess we'll go to dashboard, new syndication here. Then I'll just copy all of this over again. Paste it in. Okay. And we have all the rest of these buttons now,

which is wonderful. Click generate. And then I'm going to go here and then check to see whether or not a web hook was actually sent. If the web hook wasn't sent, I don't believe it will be. I'm just

going to notify the agent. Hey, the generation occurred, but the web hook was not sent to the address that I added. Um, double check that all of that is okay. I imagine there's probably some issue related to the fact that we're not on the URL that we initially thought we'd be on. Yeah,

cool. So, we have that the generation has occurred. We didn't end up getting that.

I can copy this, though. Go back to dashboard. Now, I see we have two created. And there's the content library here with the the the second post, which is nice. Okay, what else is it telling me? It's telling me that um all the code examples have been updated. So, I should be able

telling me? It's telling me that um all the code examples have been updated. So, I should be able to go back to API access here and then give this a little refresh. I'm giving this a refresh because

I wanted to hardcode the change. Okay, just taking a look at this code. Example still says

Okay, I'm going to go to upgrade and let's see if that works. So, we can now select one of these three options. So, I'm going to go pro. Seeing that it's opening up a Stripe checkout page,

three options. So, I'm going to go pro. Seeing that it's opening up a Stripe checkout page, which is good. I'll go to USD and then I'm just going to pretend enter some details here and then click subscribe. Looks like the processing is occurring, but is it going through?

Okay, cool. So, it looks like it went through. Did we go back to checkout? Okay, cool. Yeah,

we have and we've upgraded. When a user pays, um, add some confetti or something upon the redirect only when they make it back after paying. Okay, after a little bit more back and forth, you can see we actually have the right profile set up. So, I'm going to head back to Stripe, generate a new key, and then actually reveal and then copy this whole key. And I'm just going to see if this ends

up working because that's the API functionality. Okay, we're still getting unauthorized. Um, this

using this superb basease session. I don't know exactly what that is. I imagine this is probably going to solve it. Yeah. Okay. So, we we're going to have to rewrite that a little bit. The good

news is the name now saves along with various password problems. Uh, we've now solved all of that. Wonder what managed subscription is going to look like. I've never been there before. Oh,

that. Wonder what managed subscription is going to look like. I've never been there before. Oh,

nice. Okay, cool. So we can actually like we we literally have like our own managed subscription page which is Sweet. Um why don't I go to dashboard just so I could take a look at that as well. Cool. So here are the generations and stuff like that. Nothing upcoming because I don't think

well. Cool. So here are the generations and stuff like that. Nothing upcoming because I don't think we have anything scheduled. Yep. Cool. Yeah. All right. This looks pretty good. Generated formats.

LinkedIn post two generated exert one generated formats generated. Cool. Cool. This tells me what they are now. And then we have access to all of our old posts. Awesome. So now I'm just going to mobile optimize this and then run security audit. And then honestly that's it. We're live, baby. We

can see we're actually sending over a live API request to the Splinter-app API as well. So,

this isn't just a front-end app for us anymore. This is entirely um yeah, this is super clean.

Super clean. So, yeah, pretty stoked about that. We also have the API functionality. Obviously,

we could paste in links as you guys have seen. Not going to lie, this is pretty solid as far as apps go. We uh now basically have something that's capable of doing everything that I want.

Last thing is I'm just going to paste in this security prompt. And just because we've done this what three times now, I'm not going to bore you all with the details, but suffice to say, using Gemini 3.1 Pro in conjunction with Claude Code for both a mixture of front-end design and then backend configuration, route creation, and then payments, and so on and so forth,

is pretty dang efficient. Now, I should note that we used a ton of tokens this time, and I don't actually recommend using that many tokens, like committing that many tokens to an app. Um,

I just did this because I traded off speed uh basically for money. I wanted to get this done as quickly as humanly possible because of an upcoming engagement, not necessarily, you know, have three or four instances of cloud running or uh, you know, take three or four hours when realistically I could have done it in 45 minutes. So, I'm not going to push the fast mode on you.

It's just an option. Uh, just keep in mind it does cost a fair amount. This session was probably at least $70. And I'm sure you can imagine if you develop an app every couple of days or

least $70. And I'm sure you can imagine if you develop an app every couple of days or work on your codebase every few days, that sort of thing is going to add up pretty quick. For me,

I'm happy to do it because of the arbitrage and then the value that I got to produce. Hopefully

you guys now see how to build an app just like this. Not just a simple CRUD app, but a CRUD app that also has API wrapping functionality that does OOTH integration with social media platforms even, which are some of the most secure and difficult to authenticate and organize. And then finally, um, payment integrations as well, like with Stripe. All right, so you now know how to

vibe code an app. Congratulations. However, most people that have gotten to this point are probably not just interested in building internal apps and tools for themselves. Like, if you've gotten to this point, you're probably really interested in building for other people, whether it's consumers, whether it's other businesses, maybe it's some organizations that you're working with or whatever

you want to help economize their workflow and so on and so forth. And so, what I wanted to do next is round out the course with a module all about pricing, packaging, and selling what you build.

Now, most people that are here in your shoes, okay, that are probably interested in um pricing, packaging, and selling what they just put together, don't really have any experience doing so. And so, it's not that they don't have any like vibe coding um business experience. It's that they

so. And so, it's not that they don't have any like vibe coding um business experience. It's that they don't have any business experience in general. And so, what I wanted to do is just give you a very highle look at some tactics and playbooks that you could follow to significantly streamline your ability to actually successfully go out there and then sell this sort of stuff. whether you know at

a small scale or whether at a large scale, whether your goal is to replace your income or whether your goal is to, I don't know, start a business that does $100 million. Now, I think there are a lot of people on YouTube that make courses on vibe coding and stuff and um they're like, "Oh, you know, here's how you make all these super cool crazy apps and here's how I spun up 500 clones and

publish them to the app store." But not a lot of these people have actually made money. So, I know that this is a vibe coding course, but hopefully it'll allow me to dive a little bit into the business side of things because personally, that's what I find the most interesting. Collectively,

my businesses make over $300,000 a month in profit. Um, and that's a pretty easy number to hit revenue-wise, I think, if you know what you're doing. But profit-wise is a different story. So,

all this to say, you know, I I do this sort of thing professionally. I generate revenue outcomes and profit outcomes professionally for businesses at this point. Let me run you guys through at least at a high level what I know and what you guys can use to make some money with vibe coding.

So, the big thing I want you guys to know is over the course of the next, you know, 5, 10, 20 years, um, software will no longer be the moat. So back in the day, right, 30, 40 years ago, if you were a cool startup and you were working on some new computer system, okay, and you were smarter than, you know, your competitors and you spent more time on it than competitors, you might have had like

a small edge and maybe with that small edge, you would have carved out like an operating system or something like that. And maybe potentially you would have called that Windows OS and then you would have sold that at scale to people and that's how you would have made your money. So if you think about it like Microsoft and Windows, Windows uh uh was like software mode, software as a mode.

Same thing with like the Apple brand of computers. Same thing with like I don't know applications afterwards like Photoshop and like various databases and stuff like that. Businesses that

were built entirely off of software made sense like 30 or 40 years ago because software back then was very difficult to make. Okay. Well, nowadays software is very easy to make as hopefully I've just demonstrated here over the course of the last six or seven hours or however long this damn course ended up being. So, we've transitioned pretty heavily. Unfortunately, a lot of people are

still stuck in that old school world where they think, okay, that they're going to put together this incredible software solution that nobody else in the market can do because they're smart and they're intelligent and they're they're visionary, they're a forward thinker. The probability that you do that is extremely low. It's extremely low. Not just because, you know, nobody's as special as

we think we are, but uh because there are soon to be 100 million times as many software engineers in the form of AI agents than there ever would have been human beings. And so moes are no longer made through software. Your edge in the market is no longer in the cool algorithm that you come up with

through software. Your edge in the market is no longer in the cool algorithm that you come up with or whatever the heck. Okay. where the moat is is in distribution, which is fundamentally different.

And rather than play by the software mode playbook like everybody in their mom is doing right now, um I encourage you to play by the distribution mode playbook. Hypothetically, why do you think Netflix is still Netflix in a world where literally anybody could just tell their agent, hey, here's Netflix.com. can you go and recreate everything about it and then I don't know you

know host the the servers and set up databases and set up all the infrastructure and then like have a little login page everything like that the reason why Netflix is not broke you know today is because Netflix contains within it distribution it contains a collection of clients vendors

relationships their staff their team their culture and so on and so on and so forth and these are things that an AI agent and until they, you know, hook it up to the cloning vats and start pumping out clients, vendors and and staff members, um, cannot currently do or reproduce. And so software,

which used to be like the golden goose, right, has basically been replaced almost completely with distribution. Okay? And in a world where anybody could build any software, the only thing

with distribution. Okay? And in a world where anybody could build any software, the only thing that makes your software different from somebody else's software are the customers essentially the vendors, the relationships, and the staff on your team um that manage it. Anybody in 2026, 2027 and beyond with a couple of ideas, a high degree of agency, which just means your ability to

like enact your will on the world, go out and do things, and a very small budget, just a few bucks, literally 15, 20 bucks, can now build whatever the heck they want. the whole moat, the whole edge is just your ability to actually reach and then retain people within an ecosystem. And if you can do that, right, and if you can focus your time and energy accordingly, then you can make a lot

of money. But if you're stuck in the software days, then you're just spinning your tires,

of money. But if you're stuck in the software days, then you're just spinning your tires, man. The whole world's up and moved on and you don't even know it yet. Hypothetically speaking,

man. The whole world's up and moved on and you don't even know it yet. Hypothetically speaking,

I want to pretend right now that um you know, we we we got a little clock here, and this is a terrible drawing of a clock, but you know, bear with me. Just pretend that this whole thing is, you know, a 60-second um um hand. Imagine that the entire life cycle of this vibe coded business that you are about to start is this hand. Okay? And it traverses a whole 60-second length. Here is how

much I'd recommend that you actually spend on the vibe coding part. Okay? Over the full 60-second life of your business, I would recommend you spend maybe 3 or 4 seconds on the actual building. Let

me make this a little smaller so we can see it better. Everything else, okay, literally the rest of all of your time, my recommendation would be to spend it not on building, not on tweaking, not on making your server infrastructure better, not on doing whatever the hell. My recommendation

would be to spend it on marketing. And this isn't a joke. If you spend 3 seconds or 12th or 5% on building, you should spend the other 1920ths or 95% on the marketing. I don't know if you guys

have been in like the the build and public space on X. I used to be uh uh you know following that fairly frequently because it was just interesting to me how people would share their revenues and talk about the apps they were building. And back then they said you should spend at least as much time building as you spend marketing. You should spend at least as much time marketing as you do

building. And I was like okay so 50/50. Um that was like four or five years ago. That no longer

building. And I was like okay so 50/50. Um that was like four or five years ago. That no longer applies. You need to spend like 19 to 20 times as much time marketing than building cuz anybody

applies. You need to spend like 19 to 20 times as much time marketing than building cuz anybody could do the building. The building is literally just like your entry ticket to get onto the ride.

The whole ride itself is your poorly spelled marketing. So without marketing and sales, to be clear, you have no product. You may think you have a product, but it's not a product. It's

just a hobby because without customers, you don't have any sort of business. You need

revenue and so on and so forth. There are also some additional benefits to having um customers that go far beyond the money that they pay you. If you have customers, what you get is you get faster iteration because you're listening now to real market feedback. You're not listening to like your own opinions and your assumptions, which is what most builders will do. Most builders are like

heavily biased. I mean, who the hell builds software products anyway? For the most part,

heavily biased. I mean, who the hell builds software products anyway? For the most part, giant nerds, okay? Myself included. I don't know what the average human being that uses my product actually wants or thinks. So, everything that I'm doing is just assuming. I'm using my own opinions essentially and I'm hoping that my opinions are correct because I possess a strong level

of empathy or whatever the hell. But the reality is most of the time I'm wrong. You know, it's like a ven diagram. You know, maybe like if this is my opinions, maybe only like 50% of my oh my god, I really need to I'm writing like a doctor. Um only like 50% of my opinions are actual reality. And so the only part of like this ven diagram that I'm actually moving the needle for

reality. And so the only part of like this ven diagram that I'm actually moving the needle for and like building features into my app that actually make sense, okay, are over here. But

like the other 90% is all [ __ ] you know? It's all like uh I'm just wrong. So why would you even like worry about your opinions? Instead, focus off reality and ground truth. The only way you can get reality and ground truth is getting customers. The ideal is sufficient number of customers.

so many so that you could start averaging out their opinions and beliefs and desires and needs and so on and so forth and then you just start designing for them. So rather than letting your own assumptions build the product, use customer requirements, use customer needs and actually do like customer surveys. Launch your vibecoded app today. You know, hypothetically,

you've seen how easy it is to do. You know, I can build one of these in just an hour or two. Okay? And then contact 20 people and have all of them use your app for free and then tell you,

two. Okay? And then contact 20 people and have all of them use your app for free and then tell you, hey, I liked this. I didn't like that. Hey, I thought this could have been better. Hey, this

didn't really solve my need. Hey, I wish it did this. I wish it did that. Take all that feedback and then use it to design the next version of your app because it's not the first version of your app that's going to make you any money. It's like the 20th version of your app that's going to make you money. In addition, because customers and distribution is really the moat, your whole focus

should be on maximizing the customer experience at every step. It should not be on making the nicest, sexiest, most polished app. And I know this is kind of annoying cuz I did just spend the last part of, you know, five or six hours hopefully teaching you guys how to do this and how to like make a really good product. But in reality, the product, as we've seen, is really only like 5% of

the whole pie now. So, focus instead on acquiring as much distribution as quickly as possible. I'm

going to run through some specific ways on how to do that. And then once you have that distribution, um try and satisfy the needs of your customer. And then generally and consistently iterate on the product. Okay. So, highle advice aside, how do you actually do the big thing that I

the product. Okay. So, highle advice aside, how do you actually do the big thing that I think a lot of people are wondering? How do you price your product? Well, what I want to do next is talk about essentially my core principle for pricing. And this is a core principle that I've used to generate tens of millions of dollars in revenue across a variety of businesses, small

to mid-size businesses, my own agencies, digital marketing businesses, uh a couple multi-billion dollar portfolio companies. And um this is something that I just I I continuously return to you because it's the easiest and simplest way to price. So, it's called VBP or valuebased pricing. And so in value based pricing, what you do is you price based off the value that

pricing. And so in value based pricing, what you do is you price based off the value that your app delivers, not on your costs or your competitor's pricing. You know, and I think a lot of people are like, well, I have to anchor to my competitor's price, don't I? And to me, I say I mean like obviously your competitor's price is a factor and people are going to be doing some price

shopping. But if you focus on the value instead of at what your competitors price rather than running

shopping. But if you focus on the value instead of at what your competitors price rather than running uh down to the very bottom and it being like a race down below like a lot of these freelance platforms and stuff where somebody bids nine, another bids eight, another bid seven till you're at freaking zero. What we do is we just establish how tremendously valuable a product is and then

charge such a vanishingly small percentage of said value that the customers are bought in regardless.

I mean to them it's like a it's it's a pittance. And I know this because I also purchase software.

um what ultimately a lot of B2B software users are looking for is something that maximizes their return on investment and minimizes the friction involved in making the purchase decision. So let

me explain what I mean by all this. There are two types of value that you can produce at least in a B2B environment. In a B2C environment you have additional types of value. Those types of value

B2B environment. In a B2C environment you have additional types of value. Those types of value are nonmaterial and so it will not be discussed. You have the ability to directly reduce their expenses which is the money that your product will save a customer if they use you. And then

you also have the ability to significantly increase their revenue in opportunity cost, which is also termed the additional money customers can now earn because they use your product. I think direct expense savings are pretty simple, right? If I have product X and product X

product. I think direct expense savings are pretty simple, right? If I have product X and product X currently costs the user $100 a month and I say, hey, I just built product Y. Product Y only costs $5 a month. What do we have there? What I've done is, if you think about it, I've saved the customer

$95 every month. And so the direct expense savings are 95 bucks. Easy. Now, an opportunity cost. Now,

opportunity cost is a little bit different. Instead of focusing specifically on what the delta between, you know, their old thing and then their new thing is, what we focus on instead is how much time do they save and what is the cost of that time. So I'll give you a brief

little example. Let's say hypothetically you are currently a salesperson. You work at big

little example. Let's say hypothetically you are currently a salesperson. You work at big company. Big company pays you on average about $100 per hour. Right now, as part of your day,

company. Big company pays you on average about $100 per hour. Right now, as part of your day, you do some [ __ ] admin task. That admin task involves filling out some CRM or whatever. And

on average, every single day, you have to spend 2 hours doing this. Okay? So, they're paying you $100 an hour. You're doing an admin task that is worth 2 hours. If you hypothetically could build a software solution that enable this salesperson to spend zero minutes doing this admin task, how much money are you saving this salesperson right off the bat? You're saving this company

right off the bat. You're saving $2* $100 an hour or $200 an hour. That is your direct expense. But

if you think about it, what do sales people do? Salespeople are tasked with increasing the revenue of the business that they work in. Hypothetically, let's say if instead of focusing on admin time, they then focus on sales, aka calling people or whatever. in those two hours they could contact

50 people and if in one in 50 people end up purchasing a small product or something like that okay which is their conversion rate and if the average cost of that product is let's say uh I don't know $500 then by saving 2 hours a day not only are you adding $200 sorry $200 an hour

I meant $200 not only you adding $200 back to the core business that you built the software platform for you're also adding If you think about it, an additional $500 in revenue. So this is minus $200 of expense. Okay? And this is plus $500 in revenue. And if you think about the total

amount now that this software product is saving or generating the business, we have come to $700 in value and that's per day. Okay. So the expense portion is about saving money whereas the revenue portion is about reallocating the time that your software solution is now saved to allow

a person at a business to focus on higher revenue things that actually produce for a company. And in

practice usually these expenses are much smaller than the total amount of opportunity cost aka the revenue that you are unlocking. So you know how earlier we built a thumbnail generator? Well

here's a quick example of what that might look like. You have direct cost savings. Let's say

right now whatever system that they are using cost them $50 a thumbnail and they generate 20 thumbnails a month. That means that by switching over to nyx thumbnail company.co, also known as thumbly, uh you'll save $1,000 a month. But when you take into account the time savings revenue, okay, you move this 2 hours per thumbnail design period to 5 minutes. What you're doing is you're

saving 115 minutes. And hypothetically, let's say these 115 minutes times 20 are 2,300 minutes a month. Let's say with this additional time, which works out to be approximately 40 hours,

a month. Let's say with this additional time, which works out to be approximately 40 hours, this designer or something can actually make an additional $1,000 a month as well. Well,

now the total value created is $2,000 a month. What we're doing as somebody that is developing a thumbnail product is we're pricing at a very small percentage of the total value we produce, so maybe 10%. So, we charge 200 bucks a month. And then the customer ends up making 10 times as much money as they spend with us for using our service. Now, obviously, this is going to be an average,

right? Every customer is going to be different. Some people are going to produce way more value

right? Every customer is going to be different. Some people are going to produce way more value than your $2,000 a month estimate. Others are going to produce less value. But because you can't price individually per every new customer that you onboard, you have to pick a specific package price. What we've done now is we've basically used facts and logic to work out what

package price. What we've done now is we've basically used facts and logic to work out what a strong value would be for a core product and then how much to charge for it instead of relying on things like competitor analysis or worrying about what the dude in the next cubicle over is doing. And so this is a much more sustainable and higher ROI way of pricing. You're pricing based

doing. And so this is a much more sustainable and higher ROI way of pricing. You're pricing based off value. You're not pricing based off of what everybody else is doing. This young viewers is

off value. You're not pricing based off of what everybody else is doing. This young viewers is how you zigg when everybody else zags. Once you've established some sort of price for your product, my recommendation is I actually establish this as my top price. So, for instance, um let's say I kind of screwed up the uh writing here, but let's say this is like your top tier,

this is your mid tier, and this is your entry tier. You know how there's typically multiple subscription tiers for a product, right? Assuming you're doing a monthly thing. What you do is you take the top and then you set that one at uh you know, let's say 200 bucks a month. And what you do is you set your middle at approximately half of that and you set that at about 100 bucks a month.

but you uh reduce the ROI to compensate. So in this case, you know, previously I'm offering a 10x ROI on my top. Well, now I'm offering an 8x ROI on my mid and then a 6x ROI on my entry. And

so in this way, you have like a reasonable product differentiation. You have a reasonable spread of values. And this is enough to get you started before, you know, you can get enough customers,

values. And this is enough to get you started before, you know, you can get enough customers, you can actually run like strong analytics to determine whether or not people would actually prefer a $37 a month product or a $58 a month product or whatever. And that's honestly all there is to it. To make a long story short, what I do anytime I'm pricing an app, uh, Pel, an automation

service, a back-end tool, even like a big business deal, back when I was um, operating a content writing agency and we were trying to work out how much to price our product, uh, we do it all based off of value pricing, which is determining how much value our product has to the user to begin with, an expense, an opportunity cost, and then just charging a small percentage of that. And

that usually ends up being somewhere between 10 to 20% of the total ROI. And as a business owner, I'm thinking like, hey, I could put my money in the S&P 500, I could make 8% a year, or I could give my money to NYX Co. and then I'd make a,000% on my initial investment. What am I going to do with my

money when presented that choice? Obviously, I'm going to give it to Nyx Co. right now. Uh, whether

or not somebody chooses to invest in you isn't just a product of this math. It's also how much they believe the math, and that's another part of marketing. But I'll leave that for another day.

Hopefully, at least now you guys understand how to price set products. But that takes us to the next big thing, okay? which is well there's pricing the product but how do I actually get my product out there okay how do I actually market this amazing thing that I have developed well there are three major ways the first is outbound a lot of people shy away from outbound but outbound was the very

first thing that I did when I started my first business my first real business about 10 years ago I went door to door literally knocking on business doors coming in trying to shake their hands and then sell them on my little marketing package it's very difficult but this is ultimately what works So in this case, you go directly to people who need your product. You can consider this like a

sniper rifle approach. The two most popular methods right now are cold email, which is where you actually craft an email, usually using a template that appears to be personalized onetoone communication between you and the person that's reading. And then you say, "Hey Pete, I love what you're doing over at XYZ Business. I think right now you guys are currently spending all this money

on the software, and I can save that for you with XYZ product. I would be happy to give this to you for like a major discount because you're going to be one of my first five uh you know signups. I've

also attached a video here that runs through how to do X Y and Z. Um let me know if you have any questions. If I can help you out at all would be happy to. Okay. And so in this way you're reaching

questions. If I can help you out at all would be happy to. Okay. And so in this way you're reaching out directly to them. This is you. This is them and this is you bridging that gap. That's why it's called outbound. The other main way to do this is through cold DMs. And typically you do this

called outbound. The other main way to do this is through cold DMs. And typically you do this on B2B platforms like LinkedIn. Cold DMs stands for direct messages. It's just the same thing as cold email. It's just instead of using like an email inbox, which tends to be the the highway to the soul, um we're instead using like a LinkedIn message box or like an Instagram message box,

but it's the exact same idea. Some caveats here. This works really well for B2B products, but it is pretty difficult for consumer products, aka B2C products, since most of the lead sources where you're going to scrape this information do tend to be B2B. Like for instance, if you think about it, LinkedIn is entirely a commercial platform. If you sign up to LinkedIn, odds are you're signing

up for employment or business purposes. So, you can feel pretty safe that most of the people that you're scraping on LinkedIn, you're doing so because it is a B2B sort of transaction. Hey,

I can help you at XC Corp. Hey, I saw you're employed at whatever position. I think I can assist you with that and so on and so forth. If they're not on LinkedIn, crap gets a lot harder, right? So, for the most part, anytime I sell B2B, I start with Outbound. The other big benefit to

right? So, for the most part, anytime I sell B2B, I start with Outbound. The other big benefit to outbound is it's just really fast. It is way faster than any of the other methods on the list. It's also way harder, right? you sort of have to put your freaking ego on the line. And

list. It's also way harder, right? you sort of have to put your freaking ego on the line. And

um I can't tell you how many times I got thrown out of businesses when I was knocking on doors.

Security racing after me being like, "Get the hell out of this plaza." Uh but you know, it it worked and it was what enabled me to make my first uh probably $15 $200,000. That said,

this is not the only thing that you can do. It is not the only way. There are a variety of others.

The second is inbound, which I think a lot more people here are probably familiar with. Inbound,

if you kind of think about it logically, is kind of like what I'm doing right now. What

I'm doing is I'm creating very valuable content. I'm building a very strong and large audience of people that enjoy consuming my content. And then what I'll do is I'll direct a small percentage of you guys to some paid products so that you guys sign up to my service or whatever. The issue with inbound, despite the fact that, you know, if I'm here and then they're here, despite the fact that

they're now coming to you, is it's a lot slower. It takes a lot longer to build. Okay. And what a lot of people don't realize is they'll watch some vibecoded course or whatever and then be like, I'm going to make my own app business. It's going to be awesome. And then they start making content on it. What they don't realize is like when you make content um on the on the wider internet like

on it. What they don't realize is like when you make content um on the on the wider internet like on YouTube or LinkedIn or Instagram or whatever, what you're basically doing is you're like in a sea of a billion people and then you're given a megaphone. And then you're like, "Okay, I have a megaphone. This is awesome." And then what you don't realize is every other person

also has a megaphone. And then the big people that are pretty established have megaphones that are way bigger than you. And then the small people like yourself have these tiny little things that barely produce any noise uh whatsoever. And so growth on inbound is extraordinarily difficult as a beginner unless you have some pre-established success or pre-established wins. And most people that are starting these sorts of things that immediately turn to I'm going to post one thread

on Instagram every day for the next year. Uh they they don't understand this. And so what ends up happening with a lot of inbound is because it takes so much longer to build and people are so unprepared for this, they end up just screeching into the void, never achieving anything. and then

quitting before they actually build up the amount of momentum required to succeed. If I could graph sort of like the differences between inbound and outbound. And I love graphing stuff. So,

in case you've watched any of my other videos, get ready for a freaking Nyxive graph. Basically,

this is the amount of time that it takes to see any sort of win. And then this is the amount of money that it takes. Okay? And I'm going to I'm going to pretend that blue here is inbound.

And I'm going to pretend that orange here is outbound. And you guys are going to see why I prefer outbound in terms of the total amount of money you could make. Um, if you use inbound, okay, what happens is you start at this time step one and then you make no money for a long time and then all of a sudden your brand picks up and then you make a ton of money. With outbound, it's

basically the exact opposite because every single time you send a piece of outreach, it consumes a little bit of your time. What ends up happening is you usually have some success initially and then you start tapering out or plateauing and hitting a ceiling. And so if you think about it logically, both of these have major trade-offs, right? But with outbound, what happens is you make money much

much faster. You know, this might be 1 month. This over here might be one year. And so with inbound,

much faster. You know, this might be 1 month. This over here might be one year. And so with inbound, what we've done is we've sacrificed all our money in the first year for money after year number one. And with outbound, what we've done is we've sacrificed money after year 1 for money

number one. And with outbound, what we've done is we've sacrificed money after year 1 for money before year 1. Um in reality things are never fully black or white and so the recommendation is usually to do some sort of blended take of both where you know at the beginning you start mostly with outbound. Okay. And then as time goes on you shift more to inbound which allows you to generate

with outbound. Okay. And then as time goes on you shift more to inbound which allows you to generate revenue quickly without also tapering out. Um that said there are a variety of different ways you could do this sort of thing. That's where business programs like u mine maker school and so on and so forth come into play. So I'll I'll leave that with you and you guys could do whatever you want

strategically there. The third major way that you could market as somebody that develops and builds

strategically there. The third major way that you could market as somebody that develops and builds products is instead of trying to build your own distribution via you know outbound like we talked about earlier or inbound where people come to you. What you do is you just take somebody else okay somebody like Nick Sarif and you say yo Nick can you market my product for me and then I'll just

pay you 30%. And then what happens is Nick, you know, can use a combination of both inbound and outbound methods to do that marketing for you. But the idea is because he's already developed sort of pre-existing distribution, it's way faster. And uh you know, all you're really doing is you're paying a percentage. So it's more predictable for you. Maybe it won't necessarily be cheaper, but it's

a percentage. So it's more predictable for you. Maybe it won't necessarily be cheaper, but it's probably cheaper than you initially buying a bunch of software platforms, getting a bunch of cold emails, uh getting a a beautiful studio and all that stuff. So, the whole idea is you just partner with someone who has pre-established distribution and then you make it a win-win for them. You're

like, "Hey, man. This software does exactly what the heck you really like to do. Uh, I think I can really help your viewers and stuff like that as well." And rather than you having to build a whole new product from scratch, why don't you just use my product and I'll just pay you a percentage. You

like my product, right? Yeah. Okay. Awesome. So, it's a win-winwin. As mentioned, it can be inbound or outbound affiliate, though. Inbound tends to be the most popular one because it's more scalable.

And then yeah, you're just monetizing somebody else's audience or work, which allows you to like quickly jump cut in uh basically return for some predictable outflow of your money. Okay, so

hopefully I've now showed you guys how to not only price but also package together multiple tiers and then also get started with the marketing of your product. My recommendation to be clear is to start with some form of outbound laser or sniper rifle target specific people whose needs you are solving and handling with your product. And once you have a solid base set up, maybe 10, 20, $30,000 a month

in recurring revenue, then you can transition over to maybe building a brand um um you know, doing the whole megaphone analogy that in reality tends to be the best of both worlds. Um affiliate

is also open to you at any level of the stack. So whether you guys are early on, whether you guys are a little later on, I do highly recommend looking for those sorts of partnerships and then finding opportunities to, you know, plant your seed and have other people water them from here on out. Obviously, I can't cover every possible business permutation. Some people are going to do

on out. Obviously, I can't cover every possible business permutation. Some people are going to do like high ticket SAS style stuff where you have to sit down and do demos. It's going to be more sales. Other people are going to do low ticket SAS stuff where basically people guide themselves

sales. Other people are going to do low ticket SAS stuff where basically people guide themselves through their onboarding checklist and stuff. Um, you know, that tends to be more marketing. But

hopefully this at least tells you guys a little bit about where the market is going and then how to practically take what I'm talking about here to improve the quality of your guys' lives, businesses, and so on and so forth. Okay, that was a hell of a course. I had a lot of fun putting all that together. If you guys have made it to the end, y'all are real ones. I have uh one quick ask,

two, I suppose. The first is if you guys like this sort of thing and you guys are curious about how to monetize your own vibe coding business, definitely check out Maker School. It's my

day-to-day accountability program where I actually guarantee you your first paying customer for an AI or automation business in 90 days. If you don't get customer number one in 90 days, I I refund you in full. So, it's a full 100% guarantee. Inside of Maker School, you'll learn how to put together

in full. So, it's a full 100% guarantee. Inside of Maker School, you'll learn how to put together really classy and clever offers, sort of like the offer I'm using to get you into Maker School, as well as do things like set up outbound campaigns, uh, productize your business, and then eventually scale to inbound, like I talked about here. Additionally, I'd love it if you

could check out my podcast with Mr. Jack Roberts. We both talk on AI automation. It's a blend of news and then us just goofing around, showing off our boulder shoulders. So, no pressure.

Do whatever the heck you want. Lastly, you'll find everything that you need down below in the project description. And then yeah, if you really like this sort of thing, then please subscribe.

project description. And then yeah, if you really like this sort of thing, then please subscribe.

Helps out my channel. Comment and engage with the video. And I'll catch all y'all on the next one.