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  

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,  

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  

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  

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  

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,  

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  

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  

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.  

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  

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  

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  

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.  

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  

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  

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  

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,  

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  

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  

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  

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  

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  

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  

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  

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  

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  

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,  

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,  

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  

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  

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  

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.  

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  

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  

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  

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  

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,  

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  

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  

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  

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  

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  

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  

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  

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  

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  

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  

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  

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  

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  

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  

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  

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 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.  

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,  

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  

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  

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,  

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  

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,  

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  

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.  

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  

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  

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  

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  

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  

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  

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  

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,  

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,  

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  

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  

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,  

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  

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  

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  

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,  

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  

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,  

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  

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  

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,  

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  

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,  

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  

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  

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,  

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  

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  

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,  

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  

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  

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  

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  

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 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,  

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,  

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.  

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  

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  

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  

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  

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  

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.  

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  

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,  

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  

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,  

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,  

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  

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  

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  

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  

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  

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  

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  

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  

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,  

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  

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,  

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  

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  

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  

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  

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  

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  

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  

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  

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.  

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  

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  

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.  

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.  

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  

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  

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  

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  

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  

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  

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  

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,  

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.  

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  

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.

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  

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  

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  

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  

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  

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,  

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  

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,  

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.  

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  

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  

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.  

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  

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  

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  

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,  

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.  

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  

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,  

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  

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  

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,  

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  

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  

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,  

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  

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  

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  

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  

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  

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,  

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  

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  

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  

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  

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,  

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  

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.  

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,