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

## Метаданные

- **Канал:** Nick Saraev
- **YouTube:** https://www.youtube.com/watch?v=gcuR_-rzlDw
- **Дата:** 27.02.2026
- **Длительность:** 6:23:04
- **Просмотры:** 135,399

## Описание

🔥 Join Maker School & get customer #1 guaranteed: https://skool.com/makerschool/about
💎 All course files: https://drive.google.com/drive/folders/1eGTwguPbANKzhtA7EFq4YSLsZnqA_ZCH?usp=drive_link
🎙️ Listen to my silly podcast: www.youtube.com/@stackedpod

📚 More free courses
→ Claude Code (4hr full course): https://www.youtube.com/watch?v=QoQBzR1NIqI
→ Agentic Workflows (6hr full course): https://www.youtube.com/watch?v=MxyRjL7NG18
→ N8N (6hr full course, 890K+ views): https://www.youtube.com/watch?v=2GZ2SNXWK-c

Summary ⤵️
This is the definitive vibe coding full course, where you'll learn how to vibe code with Gemini 3.1 & Antigravity. Throughout the course, you'll build five full fledged apps, and along the way, learn real software engineering topics like hosting and deployment, modern software design patterns, languages and frameworks, version control & GitHub repositories, and programming with agents and agent teams. We'll use a mixture of Gemini 3.1 Pro, Antigravity, Supabase, Next.js, Vite, Apify, & more.

The course will focus primarily on Gemini 3.1 Pro (High)/Antigravity. We'll teach you how to design apps from scratch and then launch them, including with payments, Stripe integrations, authentication, databases, and more. And all of it will give you practical, hands-on look at how to vibe code stuff for real in 2026.

My software, tools, & deals (some give me kickbacks—thank you!)
🤖 Apify:  https://apify.com?fpr=nick (30% off for 2 months with code 30NS) 
🚀 Instantly: https://link.nicksaraev.com/instantly-short

Follow me on other platforms 😈
📸 Instagram: https://www.instagram.com/nick_saraev
🤙 Blog: https://nicksaraev.com

Why watch?
If this is your first view—hi, I’m Nick! TLDR: I spent six years building automated businesses with Make.com (most notably 1SecondCopy, a content company that hit 7 figures). Today a lot of people talk about automation, but I’ve noticed that very few have practical, real world success making money with it. So this channel is me chiming in and showing you what *real* systems that make *real* revenue look like.

Chapters
00:00 Introduction to the Vibe Coding Full Course
02:30 Setting Up Antigravity
05:45 Navigating the Antigravity Interface
09:49 The Agent Chat Panel and AI Interaction
11:40 Customizing AI Behavior and Workflows
15:14 Introduction to MCP Servers
16:12 Adding Context to Prompts
16:56 Conversation Modes in Gemini 3.1 Pro
18:08 Selecting AI Models for Tasks
19:50 Voice Dictation and Communication
22:07 Using Claude Code for Development
24:23 Leveraging AI for Business Efficiency
24:53 Getting Started with Cloud Code
28:45 Building a Simple Portfolio Site
32:07 Comparing AI-Generated Designs
36:51 Making Design Adjustments
41:29 Deploying Your Website to Netlify
44:18 Understanding Security in Applications
45:57 Key Security Practices
59:43 Conducting a Security Audit
1:02:22 Transitioning to a Full Stack Vibe Coded App
1:02:38 Building a Client Dashboard Platform
1:03:41 The Vibe Coding Design Loop
1:06:55 Common Vibe Coding Stack Overview
1:45:36 Creating the Full Stack Client Dashboard
2:11:49 Understanding Modern Software Engineering Principles
2:18:53 The Development Process Overview
2:20:56 Basics of Databases and Hosting
2:24:31 Database Requests Simplified
2:24:44 Types of Databases
2:25:57 SQL vs NoSQL Explained
2:28:06 Programming Languages Overview
2:28:33 The Role of Frameworks
2:33:55 Frameworks in Action
2:36:00 Understanding Version Control
2:39:00 GitHub and Repositories
2:42:14 Smart Ways to use Agents in Vibe Coding
2:53:00 Vibe Coding a Lead Generation App
2:56:51 App Structure and Planning
2:57:57 Designing the User Experience
3:01:16 Testing and Functionality
3:02:13 Troubleshooting and Debugging
3:10:11 Integrating APIs
3:36:41 Logo and Branding
3:38:53 Deploying Vibe Coded Projects on Netlify
3:41:29 Security Audit Initiated
3:47:49 API Wrapping and Functionality
3:50:37 Payment Integration Overview
3:54:14 Vibe Coding a Thumbnail Generator
3:59:49 Design Inspiration and Development
4:06:56 Vibe Coding User Experience Enhancements
4:26:59 Deploying Vibe Coded Apps to Production
4:38:34 Debugging Payment Issues
4:48:19 App Launch and Security Check
4:56:12 Ideating New Vibe Coded App Concept: Splinter
5:50:00 Feature Integration and Enhancements
5:54:00 Pricing and Marketing Strategies
6:21:59 Vibe Coding Full Course Wrap-Up

## Содержание

### [0:00](https://www.youtube.com/watch?v=gcuR_-rzlDw) Introduction to the Vibe Coding Full Course

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.

### [2:30](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=150s) Setting Up Antigravity

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

### [5:45](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=345s) Navigating the Antigravity Interface

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

### [9:49](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=589s) The Agent Chat Panel and AI Interaction

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

### [11:40](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=700s) Customizing AI Behavior and Workflows

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

### [15:14](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=914s) Introduction to MCP Servers

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

### [16:12](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=972s) Adding Context to Prompts

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

### [16:56](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=1016s) Conversation Modes in Gemini 3.1 Pro

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

### [18:08](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=1088s) Selecting AI Models for Tasks

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

### [19:50](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=1190s) Voice Dictation and Communication

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

### [22:07](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=1327s) Using Claude Code for Development

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

### [24:23](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=1463s) Leveraging AI for Business Efficiency

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,

### [24:53](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=1493s) Getting Started with Cloud Code

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

### [28:45](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=1725s) Building a Simple Portfolio Site

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

### [32:07](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=1927s) Comparing AI-Generated Designs

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

### [36:51](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=2211s) Making Design Adjustments

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

### [41:29](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=2489s) Deploying Your Website to Netlify

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

### [44:18](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=2658s) Understanding Security in Applications

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 security 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%

### [45:57](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=2757s) Key Security Practices

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

### [59:43](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=3583s) Conducting a Security Audit

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

### [1:02:22](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=3742s) Transitioning to a Full Stack Vibe Coded App

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

### [1:02:38](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=3758s) Building a Client Dashboard Platform

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 end- all beall. There are many many  different ways to do this. But in my experience,   this is like 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

### [1:03:41](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=3821s) The Vibe Coding Design Loop

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 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 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 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 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 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 need to test it  again. So we're going to do some end toend tests.    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 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 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

### [1:06:55](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=4015s) Common Vibe Coding Stack Overview

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 you're seeing, what's  rendered here 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 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 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 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 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 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 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 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 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 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 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. 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 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 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 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 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 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. 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.    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 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 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 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 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 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. 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. 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 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 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? 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 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. 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

### [1:45:36](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=6336s) Creating the Full Stack Client Dashboard

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 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 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 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 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 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 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 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 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 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 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 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,   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 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 reading through everything here. It   looks like most of our audits are correct. We  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

### [2:11:49](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=7909s) Understanding Modern Software Engineering Principles

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

### [2:18:53](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=8333s) The Development Process Overview

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

### [2:20:56](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=8456s) Basics of Databases and Hosting

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

### [2:24:31](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=8671s) Database Requests Simplified

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

### [2:24:44](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=8684s) Types of Databases

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

### [2:25:57](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=8757s) SQL vs NoSQL Explained

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 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 a Google Drive folder where you're just   storing a bunch of different documents and every  single document could look a little bit different.

### [2:28:06](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=8886s) Programming Languages Overview

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

### [2:28:33](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=8913s) The Role of Frameworks

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 stuff like  that. Now, worth noting that this is a website   with no CSS, which is sort of the next level up.   Now, CSS is how you change the style of the page.    It's how you make things bigger or smaller or  or sexier or whatever. So, if I go style here,   I can actually change the font size to like 300  pixels and I can make that bigger. This HTML is   just that core fundamental um kind of structure,  the scaffold of the page. This style is now CSS   and it's where I'm like applying some additional  information to change the size. I could change   the color and I could do so on and so forth. I  could I could change things quite a bit. Now,   there is that one final piece which is JavaScript.   And JavaScript nowadays is done mostly through the   console. Inside of the console, you can actually  run um JS. So what I could do is I could go   document query selector and then I could look  for all H1's elements and then what I could   do actually remove this from the page um just by  clicking or writing document. query selector H1-E   and this is an example of that interactivity that  I was talking about. Basically with JavaScript   what you can do is you can I'm realizing that  my head's in the way here so you can't see that   most recent function. Um basically what JavaScript  allows you to do is allows you to select specific   elements on the page and do whatever you want with  them. You can make them bigger, you can make them   smaller, you can apply styles, you can create new  HTML. I mean, there's like a bajillion different   things you can do. Okay, so those are the three  programming languages. And hopefully we're all   on the same uh page about how these two or three  interact with each other. The thing is, obviously,   if you design a website or a web app using HTML,  CSS, and JavaScript, there's like a million   different ways you could do so, right? You could  write whatever website you want, apply whatever   styling you want, and then obviously apply  whatever interactivity you want, and that's great.    But the internet thrives off standardization,  which is where things are done in a repeatable   and sort of consistent way. Because of this,  the more standardized the internet tends to be,   the better solutions that people can build on top  of pre-existing solutions. And that's really the   whole idea of programming languages in the first  place. So in addition to this idea of you know   languages as um standardization you also now have  this concept of frameworks as standardization. And   so frameworks are a level of abstraction that  are built on top of languages. And what we do   is we actually just take these three sort of Lego  blocks and we just construct them in a specific   way essentially. Okay. And right now there are a  bunch of different frameworks out there. The most   popular ones I would say are next. js which is the  framework that we just used to define and build   our current app. And you can see that include  a lot of that included a lot of opinionated   um framework based stuff for like the folder  structure and components and hooks. These are all   things that are basically a handme-down directly  from our framework. You also have um vit right   now is super popular and you'll see a lot of apps  created with vit and then on the other side you   also have view or really like nux. js and there are  varying levels of abstraction here like nux. js is   actually an it's like a second framework built on  top of another framework called uh react which is   kind of funny. Um nux. js is built on top of view.   Uh you know there are a lot of like dependencies   and stuff and if you guys remember earlier I said  we stand on the shoulders of giants. really do uh   because everything nowadays is built off of  something somebody else built which was built   off all the way  down to where we were programming computers   with little ones and zeros on pieces of tape. And  so in addition to you know our chosen tool and

### [2:33:55](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=9235s) Frameworks in Action

this is the tool I'm going to be using for the  most part throughout this course. NextJS being   essentially the way that we coral these three  programming languages together. Nex. js JS is also   an opinionated framework that um you know helps  us organize things like hosting, helps us organize   things like how to do you know database calls and  whatnot in a standardized way. You guys remember   earlier we talked about middleware authentication  middleware uh has a standardized interface for   authentication middleware is a standardized way  to put together routes which are just the names   of like um website endings. So excalagger. com/ I  don't know settings that's a settings route for   instance and so on and so forth and what's really  cool is because a lot of people have used these   frameworks before you know like NexJS isn't Neo  was developed at least half a decade ago if not   more I built tons of projects with it before we  had the luxury of agents to do that for us because   of all this we had a lot of pre-existing projects  out there on the internet that were built with   this and these were all used in the training sets  of these large language models like you know opus   gemini and so on and so forth which means make  a long story short If you use a framework, you   usually get significantly higher quality results.   Now, frameworks obviously have some baggage as   well. The more opinionated things you put into uh  you know a design system or whatnot, obviously the   more lag that you can have, the bigger the files  can be and so on and so forth. But for the   most part, these are a good balance of like  speed, stability, reliability, and then also   security. You know, because these frameworks have  existed for a while, people have put together some   pretty simple and easy ways to economize um our  security and our ability to build apps. Okay. So,   am I saying that you have to like go and  learn every single thing in HTML? No. CSS? No.    JavaScript? No. Um, do you have to read through  all the NexJS docs? No. Although they are they   are pretty cool if you wanted to. None of these  things will necessarily make you like a better   vibe coder. But I think it's important to at least  be able to like look at the Lego blocks and see   how they fit together because if you don't, then  you're a lot more liable to produce what I think   a lot of people nowadays are terming as sloop  out there on the internet, which are like simple   vibecoded apps that aren't really well thought out  and then interact with the rest of the internet in   pretty stupid ways. The last thing I want to talk  about is version control. And to make a long story

### [2:36:00](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=9360s) Understanding Version Control

short, version control just answers the question,  how do I store successive updates of files on a   server as efficiently as humanly possible? Let me  give you a brief little example. I'm sure you know   back in high school or college or whatever, those  of us that have gone there in the last few years,   you've run into situations where, you know,  you're tasked with writing an essay. And so,   you know, you write your essay probably really  late in the middle of the night with a bunch   of Cheetos beside you. At least that's how I  used to do it. And then, um, you save it as,   I don't know, essay docx, let's say. You know,  it's like a Google doc or something   like that file. And you do it locally in your  computer, maybe Microsoft Word, okay? And then,   um, the next day, you know, you wake up and then  you give it to your friend, and your friend gives   you some feedback or something like that. Okay?   So what they do is they download the file   and then they give it back to you and then it's  called essay with feedback. docex. So what you do   is you take that file but not wanting to lose the  previous two files what you do is when you make   your updates to it okay you don't save it as essay  with feedback you call it essay 2. d dox and then   the cycle just repeats itself three or four times  then you have essay 3. d dox you have essay 4. x doc   x and so on and so forth until you have  essay final superfal important docx. Okay. And   before you know it, you know, your whole downloads  folder is a mess. I'm sure we've all probably had   situations like this before. Um I know, god  forbid, I used to have situations like this   all the time. Now, that's for writing things like  essays. I want you to imagine instead of essays,   what you're doing is you're working on an app like  we're doing. You'll have app one dot whatever,   app two dot whatever, app three super important  final whatever. Obviously, these things can get   out of control really quickly. What compounds  the issue is this idea of needing to share files   because this super janky ass method, this could  work if it's just you and you understand how you   name your files and stuff. You could build like a  naming convention, right? But what if you want to   share this with like 20 other people and 20 people  all simultaneously need to be able to work on the   file that is the most updated without causing  conflicts and stuff like that and so on and so   forth. That's really the whole idea behind what  initiated version control. And so what we do is   we basically have again standing on the shoulders  of giants um built systems out there that store   not only the file itself but store the changes  between files and then just let you access them   by you know calling a little URL or something and  then pulling the file as well as a list of all the   changes um that have historically occurred. So  that at any point in time, you know, you could   download, let's say, this original file, but  then you could jump over here if you wanted to,   to, jump over here  here if you wanted to,   and so on and so forth, all without just needing  to like pollute your, you know, file system and   stuff like that. What's more, at any point you  could also branch out and make additional changes   here, however much you want, called, I don't know,  new essay. And then you could share that new essay

### [2:39:00](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=9540s) GitHub and Repositories

uh with other people. Okay? Or what you could do  is you could make the changes here and then you   could actually take these changes and then merge  them with another pre-existing file to get some,   you know, new better essay hypothetically. Um, you  could do that with apps, you could do that with   essays, with everything.   People use version control to literally do   everything nowadays, research papers and so on  and so forth included. So the major place where   most version control happens now is on GitHub. And  what we do is we've taken this concept of like a   folder or a workspace and we've standardized it  into one called a repository. And so this idea   of a GitHub repository is very popular. You go  into github. com. This is what the website looks   like. Okay. And you can see on the left hand side  I'm signed in here. I have a bunch of different   um repositories. I didn't even realize, but  I have a bunch of people here that are like   starring my repos and stuff. That's hilarious.   Um I have a bunch of different repositories   here like worklog make money with make gyro  app. 1c. copy. com copy. com, proposal generator,   and so on and so forth. And these are all  basically different projects that I've built. Now,   what's cool is if I click on any one of these,  okay, you can actually see every change that I   have made to this over the course of god knows  how long. This is basically over the course of I   don't know 346 different changes. If I click this  button, the wildest thing, so I can actually go   through and I can see literally every change I've  ever made to this thing. And at any point in time,   okay, I can actually open up the details and then  the code itself to adjust what's going on. I could   uh restart my, you know, project from here. I I  mean, I could do anything. I could share this with   other people really easily. Um, and so on and so  forth. So, I say this not because I want this to   be a comprehensive guide to GitHub. Obviously,  it isn't. I just like gave you guys a very high   level overview. Um, but in a nutshell, all this  is just a way to store and and save files.    And so whereas with our last couple of projects  with our portfolio site and then the um app that   we just built, I wasn't using GitHub for any of  it, from now on, what we're going to do is we're   actually going to take our big file structure  that we're developing locally and we're going   to constantly push it to GitHub so that we both  have like a saved version over there if anything   locally occurs, but also we have the ability to  um share it with others. And then services that   do deployment nowadays like Netlife, Versel, and  and other platforms out there, they can often just   pull directly from the GitHub. So I don't have to  like drag my folder in. I could just say, "Hey,   here's my GitHub repo. " And then it'll just do all  the math and stuff for me. And then I don't even   have to like rebuild it on Netlefi. What I could  do is I could just push it to this repo, make a   couple of changes, and then Netifi will have  like a little hook that automatically rebuilds   the site every time a change occurs. And this is  how you get like different pipelines set up with   like production, staging, local, and so on and  so forth. You can also create different branches   branches. I guess I have one here called chest day  workout. That's pretty funny. Must have crushed   that chest day. Um, and then just have agents  manage like everything to do with uh with whatever   project you have. So, for instance, this is like a  little work log that I set up that basically just   like a list of things that I've done. I use it to  track my own work. And uh I developed this   in just a few minutes with uh with claude code  I think like two months ago essentially. The   last thing I'm going to mention here is everybody  gets a GitHub profile. And so there are a lot of   people out there that are have very popular GitHub  profiles. This is usually where most open source   lives. So, you know, if you develop a really cool  new idea or new framework or something, you make a   GitHub repository and then you share it with other  people and then other people can also make changes

### [2:42:14](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=9734s) Smart Ways to use Agents in Vibe Coding

and then improve it over time. Um, that's what  a bunch of really popular repos tend to do. If   you guys have checked out like the open claw one  and stuff like that, that's where they were   getting um most of this from. And then with  agents, what you could do is you could actually   just have parallel instances of like 10,000  operating in the background, constantly scanning   the workspace and then making micro adjustments  and edits in a very interpretable and accountable   way. So the future of software development is  basically that decentralized GitHub repo pushing   and pulling and stuff. Okay, cool. I think we've  now done enough of like the traditional software   engineering concepts for you guys to know a lot  more about how to build these things efficiently.    Um, what I want to do now is just talk really  briefly about a couple of the different ways you   could use agents to streamline your work. I know  we touched on this briefly with the repo stuff a   second ago, but I just want to zoom out a bit and  then just look at anti-gravity and look at some of   the potential and the functionality there in.   Okay, so if I just go back to anti-gravity here,   you know, I still have that old site set up. Um,  I should be able to clear this just by going to   new. Um, one of the simplest and easiest ways to  multiply your ability to work on a specific repo,   which is just what I'm going to call our workspace  or file folders from now on, is basically just   running multiple different separate functions  simultaneously. And so, you know, I could say,   hey, do XYZ, and then I could just wait until this  whole thing is finished. And then I could give it   some more instructions. Hey, thanks. Let's now do  ABC. Or what I could do is I could make use of the   ability to start new conversations. And I could  actually run multiple of these um simultaneously.    So I think we're all familiar with just using the  little agent tab on the right hand side. But in   order to parallelize your work and then work a  lot faster, what we can do is we can zoom out of   a specific workspace and then actually just look  at like 3 4 5 10 100 agents working simultaneously   for us and then just orchestrate their actions.   This can sound pretty bonkers if it's the first   time you've done something like this, but this  sort of functionality is actually built into   anti-gravity and uh it's also built into things  like cloud code and stuff like that as well.    The way you do so is with this agent manager in  the top right hand corner. So if I click the agent   manager, what we've done now is we've zoomed out  of a particular workspace. We actually have all   of our workspaces here listed on the lefth hand  side. And you can actually see every conversation   you've ever had inside of each workspace as well,  which is really handy. So, this one's improving   dashboard UX. This one's listing directories and  stuff like that. Here's a search I just said a   moment ago, or I'm pretty sure I just said like  do ABC or something like that cuz I wanted to like   have a bunch of these that I could quickly jump  through. You can see in this case just ask me,   hey, what the heck is ABC? What are you crazy? And  so on and so forth. This is some other thing that   I've developed here. thing  that I've developed. And so on and so forth.    So, I mean, like, you know, this is kind  of cool, right? You basically can just go   top to bottom and then see at a bird's eye view a  bunch of different conversations that you've had   with different agents. And you can do this across  workspaces. You can start new conversations across   workspaces. You can jump into a specific workspace  using the editor, right? Um, and so on. The really   cool thing though is if you go to this inbox in  the top lefthand corner, what you can see is you   basically get a list of all of the messages that  AI is sending you. And the reason why this is so   valuable and so cool is because if you make use of  the pending feature, which is basically where you   don't let AI do something unless you've cleared  it, what you can do is you could use this little   pending filter and then just have a giant list of  things that like 20 different agents are working   on simultaneously and then they're just like  serving you um you know the results and asking   you, hey, do you want me to do X, Y, and Z? Okay,  so let me show you a really quick and simple   example. So earlier I had this website builder  repo, right? If I just open the editor here,   I had this big Gemini. MD where I was basically  showing you guys how to create a website and   then I pumped through like two or three of them  simultaneously. And I hid this from you at the   time because I didn't want you to obviously get  super overwhelmed. But if you open the agent   manager, okay, you can see that you can now start  new conversations in what's called a playground,   which is an independent workspace, perfect for  quick prototypes or following curiosity. Then you   actually just paste in this multiple times. So you  could start a conversation by going in, paste this   in, start another paste  this in, and start another conversation by going   in, paste it in. And now in the playground side of  things, okay, you now have multiple conversations   that are occurring where it'll basically just ask  you a bunch of information. I'm just going to say,   um, choose all of this yourself, high-end SAS,  for a demo I'm making. You can just paste this in.    You could paste this in. in.   And then you could paste this in. And what I have   now, okay, is I have multiple agents that are all  operating simultaneously and independently for me.    This first one here is called cinematic landing  page build. The second one here is called building   cinematic landing pages. And then you guys can't  see these other two, but it's cinematic landing   and cinematic landing. And basically what they're  going to do is presumably they're going to create   different folders for each of these and then build  all of these websites simultaneously in parallel.    Right now what I have think about it is I've  made one command up here and it's split rather   I've made four different commands up here but  basically what I've done is I've split and now   we have these agents all running simultaneously  and inside of this playground I have the ability   to like get a highle overview what of what um  they're all doing just by mousing through each   okay and you know sometimes you're either going to  run into token limits or there's going to be some   issue so agent terminated due to error here when  this sort of thing occurs you can reply and you   can also just use this agent conversation for it  to show you more or less like what it's currently   working on. So, you know, if I go to inbox here a  moment ago, it basically said, "Hey, like what do   you want me to do? " That that was a message  that the agent sent to me asking me for approval,   right? I can actually just see all these things  at a very high level overview just by constantly   being on this page. And then essentially all I'm  doing is instead of like me being responsible for   shephering one agent simultaneously, sorry, one  agent through a process, I can shepherd multiple   simultaneously. And this is the difference between  somebody that's like building one project and then   somebody that's orchestrating multiple projects.   You do run into some issues with like context   switching, which is a productivity term that  basically applies to when you're trying to do   multiple things simultaneously or a little bit  less efficient at um every one individual one,   but it's sort of like monitoring like three or  four different CCTV uh pieces of footage if   you're like a security guard or something in a  mall. You're basically just zooming out. You're   watching three or four of these things and  you're stepping in anytime that a particular   person needs you. Alternatively, it could be like  you're a manager at some big office with a bunch   of cubicles that you're just walking up and down  the halls. When somebody needs you, they're like,   "Hey, you know, Nick, can you help me with X, Y,  and Z? " And so, in this way, you're capable of   orchestrating significantly more total output or  work than you would be able to do yourself. So,   it's really worth using hotkeys um if you  wanted to start building things in this way. And   uh generally speaking, believe it or not, instead  of just building one app, I will usually build two   or three apps simultaneously now with something  like the agent manager and an inbox. and then   I'll just like have them all run in parallel.   Um, the reason why is because then that way I   could build multiple versions and then I can  just pick the version I like the best. Once I   best, I drop the other  ones and then I just proceed with that one. Um,   but yeah, hot keys are pretty important. So you  can find those just by mousing over each of these   buttons. So inbox is command I for instance,  uh, if you scroll down to playground here,   you can create a new instance just by holding  controlN. And so a lot of the time I'm just   jumping between new conversations and then my  inbox over and over and over again.    Um, you can also jump back to that editor like I  talked about earlier just by going command E. This   will jump you into the particular folder where  the conversation and kind of work is happening.    So this one's called glowing cosmos for instance.   At any point in time if you're operating inside   of this playground, you also have the ability  to um move this into a specific folder. And so   this is occurring right now in like a temporary  folder that uh Gemini and anti-gravity just puts   together anytime you do this sort of thing.   But you can also just click this button and   then you can select a destination folder for all  the files in your project. So I could, you know,   use the playground to sketch out three or four  different ones and then when I find one that I   really like, I could then use the um create a new  folder thing to like actually go in add a folder   and then just work in like a dedicated workspace.   They also have a feature called follow along with   agent in the top rightand corner. So if you  follow along with agent um basically it'll   pull you back in to what the agent is doing at  every step and then allow you to see the various   um you know pieces of work that agent it's  worth keeping this page pretty clean. So, I'm just   going to proceed with whatever the heck it asked  me for. And then over here, now I basically have   these two main threads that I'm running. You can  see the same thing's occurring back here and then   also back here. And although kind of per unit,  it'll still take the same amount of time to get a   website out because, you know, this is operating  at the speed of um whatever Gemini 3. 1 Pro is,   if you think about it, I'm technically doing four  times the amount of work um simultaneously across   all four. I don't usually recommend having  more than two or three of these operating. I   just wanted to show you guys how cool it could  be if you have four. I actually have five now   cuz I'm proceeding with some um agency operation  thing I did a while back. Uh just because I find   like your attention gets pulled away a little  too much. But um yeah, you can see here in the   top rightand corner because I'm following this  anytime it'll make a substantial major update. I   can actually see the code that it's working with  and so on and so forth. I usually don't actually   click that though. I just go to my inbox and then  I seem you know do you need anything from me? if   there's any specific feature or whatever that  they want, then I can jump right in. So,   let me run this for a couple more minutes, get  a bunch of websites, and I'll just show you   what they all look like. Okay. And our landing  pages are now starting to um be finished. So,   we could actually access the Vit server. This  one's using a different framework called Vit that   I covered earlier just by pasting this in. You  can see we now have one of the websites. Now, I   should note that this looks pretty similar to the  1se secondond copy website I had set up because   uh I think I just asked it to build something that  was like very similar visually speaking. So,   we had that little heartbeat. we have this little  thing, but you know, I'm like trying to build   it with a particular template, right? So, I'm  just going to instantiate a bunch of versions   of this template, and if I like them, then I'll  go with that. This second one here is done. Um,   because I didn't specifically say, "Hey, I want  you to run the server and then open it. " You know,   this one's asking me to do this terminal command,  npm rundev. Um, so I'm just going to have it do   it by saying run it and then it'll open it  for me and then I can take a peek. Here it   is. Let's copy this over. Paste this in. Cool.   And now we have another one called Aether Core,   which is very clean. I really like this one. Damn,  that's really, really sexy. You know, there are   some issues here with some of the fonts and stuff,  but hopefully you guys see like I was capable of   generating four of these simultaneously. This one  here is still under development. As you can see,   there's a hero section and it's scrolled down, but  it is running live on a server and it does have   that cool little bar up top. And this one here had  probably my perfect instantiation or my favorite   of like this slow scrolling card like that to me  looks really sweet. Um, it's just rerunning it   because it's making some additional changes, but  yeah, pretty cool, huh? So, you can actually build   multiple apps simultaneously. And in this case,  you know, I gave it some pretty static resources.    And I was like, "Hey, I want you to use like  this kind of noise layer in the background and   stuff like that. " You could also just have all  of them be different. And the way you do that   is you just provide like a prompt that has some  inherent randomization. Basically says, "Hey,   I want you to randomly select like, I don't know,  a background from this online background service. "   And then it'll use different backgrounds. Hey, I  want you to automatically select a different type   of style using this thing. You know, instead of  high-end SAS, I just want you to come up with a   different one every single time. And then it'll  come up with like a 100. So yeah, in this way

### [2:53:00](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=10380s) Vibe Coding a Lead Generation App

I've uh successfully built something like  15 websites simultaneously at the same time. I   found like the top two or three that I like. I've  proceeded with those. I filtered out the ones that   I didn't and then I've had like a really really  high quality product. And I've done all that stuff   in like 10 maybe 15 minutes or so. Um obviously be  careful with token usage here because it's always   going to be a trade-off between the time it takes  to build something and the total cost on your end.    This is just a pretty straightforward money for  time trade, but running multiple agents in this   way um simultaneously can be pretty cool.   Okay, now that you guys know more or less   everything you need to know about both modern  software development, um, hosting, databases,   frameworks, and all that stuff, plus how to use  agents to pour fuel onto the fire, let's build   product number three, which is a lead generation  SAS app that scrapes, enriches, and even queue up   um, the sending of fully automated emails. This  is very similar to a structure that I use in   production myself in my own business, Leftclick.   We work with multi-billion dollar portfolio   companies and essentially connect to the outbound  systems on a team to help them send emails,   scrape uh contact details, and then personalize  outreach at scale without needing like a million   bajillion hires in order to do all that for us.   So this time, instead of just diving right into   the app development via prompt, I wanted to take a  few moments to sketch out what an actual app might   look like. And there are variety of different  names for this sort of thing. Um, in my case,   I'm just going to call it planning. You could  call it some form of like UX or site design   or navigation design or whatnot. In short, um I  know for sure this app is going to need a landing   page. So here I just said landing page sexy on  it. We're going to want some navbar, some main   value proposition, a social proof section, some  how it works section, some case studies, a CTA,   and then a footer. This is pretty standard, right?   It's basically the exact same thing that we did   with Content Orb. After that, we're going to want  some sort of login and/or signup page. And so this   is the O form in Superbase where you enter your  email, enter your password, and then it signs you   up. Now, what I imagine will probably happen after  is once you're signed in, um, we'll need some form   of configuration page cuz I want this app to be  able to be usable by people like you, people that,   um, you know, I don't want to have to necessarily  build for. Instead, I want there to be a space for   your instantly API key, your anthropic API key,  your OpenAI API key. Uh, I want you to be able to   configure the prompts that are being used by the  AIS to do personalization as well as have defaults   and stuff like that. And basically, I just want  that to be like your onboarding. It's like, hey,   do you want to get started with the scraping?   Just enter your API keys here. And there are a   couple of other API keys that I'm going to need,  actually. But, um, in addition to that, I also   want like brief little one-click guides to show  people how to do all of those things. And then   finally, I want the actual scraping page itself,  which is just going to be a form where you put in   some basic parameters. And the way this is going  to work, for those of you guys that don't know,   there's a scraping service out there called  Appify. And we're basically just going to wrap   around Appify. If we can't find enough leads, then  we're going to scrape Google Maps. And then we're   basically going to combine both of these into some  sort of like enrichment personalization flow. Um,   and assuming that, you know, we've enriched and  personalized, which, you know, may not necessarily   mean something to you guys if you guys aren't in  the marketing space, but I'll run you guys through   it all um throughout this demo, then you'll just  get all the leads that you just scraped in a   simple CSV with some additional column that has AI  based personalization. So, we're going to need the   first name and email at minimum. And then I think  the last thing to talk about is that orders page   or just going to be like a history page  where you could see all the orders that you've uh   scraped and sent before. And then maybe I'll also  do plus specific order pages for each that have   like I don't know a bunch of descriptions on them.   Okay. So, you know, I think uh probably a real UX   designer would crucify me uh in terms of the ways  that I've laid all this stuff out, but you know,   seems to work pretty reasonable for me. Um, what  I do next is I basically just take a screenshot   of this and then I always have this on hand  cuz you know I want to like know what my app's   going to look like. Then I go into anti-gravity  and then what I do is I um say something like,   "Hey, I'm making an app that helps people scrape  leads. Turn this into a brief description of an   app that includes all the important components  and I actually just screenshot and I send it to   them. " This is back when I had it like vertical.   I've since made it horizontal. Then scrolling down

### [2:56:51](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=10611s) App Structure and Planning

a little bit, you can see we've now changed  it into the description. Okay. And then over   here we have the updated description with just a  bunch of, you know, plain text language here. So,   we're probably going to need more. I mean, like,  it's not that big of a deal. Then I made a couple   of changes and I said, "Hey, here's some scrapers  that I want you to wrap around. " Okay. And now my   claw code instance has generated this prompt.   So, that's good for now. What I want to do next   is open a new folder cuz I've copied this and I  want to call this lead scraping SAS. I'm going   to create and I'm going to open. Now, in our  anti-gravity instance, we have a plain folder   here, lead scraping SAS. And so what I want to do  next is two things. First, I'm going to need to   feed in that prompt. And second, I want to feed  in um a description, sorry, an example that we   could use to basically inspire Gemini. Now, I went  on dribble and I found something that looks like   this. This looks pretty reasonable to me. Um keep  in mind like the design and stuff like that is   pretty sleek, but obviously they have a lot more  components here. Data transfer. I mean, I don't   really know why I would ever need a data transfer  component, but you know, there's like a bunch of   buttons here and stuff. And I think we could make  this work. Um, you know, our graph may not look as   nice, although I think we could actually make it  look as nice if we really wanted to. But for now,

### [2:57:57](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=10677s) Designing the User Experience

I'm just going to copy this image. I'm going to  go back over here. I'm gonna start by pasting that   in. Okay. So, we're going to start just by pasting  in um this image. It looks like we're copying   this, but it's not actually making it all the  way to our dashboard. It's kind of annoying. So,   I think I'm going to have to take a screenshot  of the actual app itself. I think sometimes   Dribble does like anti-creenshot protection or  something. Keep in mind that we're not stealing   this or anything. We're just going to use this as  like inspiration. That's all. go back here, paste   that in. Then I'm going to say um I'm going to  head over to Google, say cold email lead scraping,   and I'm just going to find some links here.   Basically, I just want like a brief description   of what cold email lead scraping is. So, let me  see if maybe instantly has some information on   their site. Um, this is like a full endto-end cold  email sending platform. Uh, probably not what I   want. I just want like some lead scraping.   This looks pretty good. I like this. So,   I'm just going to copy this. I'm going to head  back here. I'm going to paste this in. I'll say   this is an example of the sort of thing that we're  about to build. I'm going to paste this in just so   it has context and so it can write my landing page  for me. And then next up, obviously, we need that   um prompt that we just copied over. I'd like  to build an application. I want it designed   according to the screenshot that I sent over. The  specifications and the stack is um in the middle.    And then I've also given you a description of  another website that does something similar that   I'd like you to emulate for the copywriting  and content and so on and so forth. Okay,   we're going to stick that in. And uh this is most  likely going to end up using like a next. js stack,   although I did not this time necessarily want  to be opinionated cuz I wanted to see what the   app was going to do. Uh when it ends up creating  files, it'll do so over here. Keep in mind that   we are in planning mode as per usual. So that's  what's going on down here. And it looks like we're   using Oh, actually we're using Vit, which is good  because that'll give us a the ability to maybe   use a different framework here. To be honest, I  don't really care about the specific framework,   right? We talked about how there were multiple  uh in the previous section. So, whatever works   is going to work. Um, you know, as long as it's  fast and performant. Okay. So, at this point, I'm   just going to sit back and let it do its thing.   Awesome. So, I just got a notification saying that   it's done for Leadzo, which is the name that uh I  decided I would give our cute little app. And now,   what I'm going to do is I'm going to say run  it. The reason why I'm going to do that is   because in order to access this application,  we're obviously going to need like some server   running at the back end. Our browser is going to  end up being the client and then that's how we're   going to communicate with that. So, our server  is going to be on our computer for now since it's   all local. Let's see how it goes. So, we got the  Vit server set up. This is the landing page. Uh,   super clean. I like it. Okay, so we have like  some weird spacing here. That's fine. This is   really nice. I like this AI personalization  prompt. Very clean. Nice. 100   free credits. Okay. So, what happens if I click  get started? I go over here, which is nice. Um,   I'm just going to ask it. Oh, it looks like it's  actually recording a browser session of me testing   this. This is wild. It's Nick Nikki Wiki. Then,  Nikki Nikki. Let's sign up. Okay, we're now   inside. We have some workspace settings on the  lefth hand side here. API integrations. On the   right, we have some prompt engineering. So, define  the rules leader should follow and generating the   personalization column for each lead. Cool. Does  this actually fill in? Okay, we just have some   placeholders for now. What happens if um Cool. So,  it went it actually went it found the uh specific   API keys and stuff. That's fine. Scrape leads. So,  we need a job name, LinkedIn Sales Navigator URL,

### [3:01:16](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=10876s) Testing and Functionality

max leads, then default icebreaker. I think what  we want is basically are going to want to be able   to just say uh I don't know like HVAC companies in  the United States and then we want it to actually   go and find that for us. We're not going to need a  LinkedIn sales navigator URL because the appy the   specific service that we're using doesn't actually  um use that. So, it's going to be okay. Then here   we have some fake order history which looks  really clean. We can, you know, open it up in   a new window or whatever. Awesome. Cool.   So, let me just check the bottom. You guys can't   see this, but there's a little button that says  log out. So, click this log out button. Nothing's   going to happen since obviously we don't have  the off set up. Yeah. I mean, like in a nutshell,   this is more or less what I wanted. Um,  anything else that we need? So, new scrape job   orders configuration. I think that's basically it.   Now, now what we have to do is we basically have   to test this. Uh, cool. So, what I'm going to do  next is I'm just going to run through a couple of   these services that we're using just so we're  on the same page. Otherwise, I think it'll be

### [3:02:13](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=10933s) Troubleshooting and Debugging

kind of intimidating for you guys to see what I'm  doing. But in reality, most apps nowadays are just   like wrappers, as in they just wrap functionality  around some other app. Of course, you could build   your functionality yourself if you really wanted  to, and I can help you with that. But in my case,   you know, for the purpose of this demonstration,  I'm just going to do what I normally do,   which is I use a three a thirdparty service called  this leadsfinder on a uh which basically allows   you to put in some parameters and then get some  leads. So, it generates targeted B2B contact list   using advanced filters. Now, this isn't the best  lead scraping service out there. I should note   that like it's actually quite poor in terms of  quality now because uh the leads are cached and   they haven't been around for quite a while. So,  I use this as an example in Make Your School,   my community all the time. But, let's say I'm  scraping some dental clinics in Canada. I want   to scrape a thousand. What I do is I basically  just put in a bunch of job titles here. Owner,   practice owner, principal dentist, lead dentist,  so on and so forth, and then locations to include,   which in my case is Canada, locations to exclude,  what sorts of emails I want to get. So, validated,   not validated, unknown. So, I actually just want  validated emails, what sort of company website if   I have them. Um, we can use to narrow down the  search. The size of the uh resulting company,   so 1 to 10, 11 to 20, 21 to 50. the industries  that I'm looking in. So, health, wellness,   and fitness, hospital, and healthcare. And then  which ones not to look for some keywords, dental,   dentist, and then I'm also excluding some down  here. Then we have revenue, and we also have some   funding. So, let me just make this smaller because  I just want to show you guys how this actually   works in practice. I just click save and start.   And basically, this thing goes on this service,   Appify, and then goes and it scrapes it  for like some small little piddly fee. So,   it's cooking up some data magic. Uh, let's just  wait until we see the very first result, which   should be about 100 leads or so. And as we see  the first rung here has found a bunch of different   leads from specific companies, company websites,  LinkedIns, their full names, their job titles, and   so on and so forth. This is pretty cool, right? I  mean, this is just like a service that I'm using,   and it returns a bunch of leads. And so, for  the purpose of this demo, I'm going to assume   we're only using like simple services like this.   We're not actually rebuilding the wheel. Although,   I should note that you totally could rebuild the  wheel if you wanted to. It's just uh, you know,   it's not super easy, right? Like, this is really  the moat nowadays. It's not the app interface   that you build. Sorry, that's the wrong one. Uh,  where are we? right over here. Okay, so basically   in order to run this, right, logically what we're  going to need is we're going to need an API token   and then what'll happen behind the scenes is this  Appify API token will plug into this search. Okay,   then it'll use some data with an input like  this via API and then it'll find us a bunch of   of stuff. And then on the back end, we're going to  do is we're going to enrich emails using a service   like this. Basically, not all of the emails  that come from this service are going to have   um like all of the information laid out. So, we  can actually use another service called an email   finder to enrich that. And then over here, um  we're going to pass in either our open AI key or   anthropic API key, whatever one works, honestly,  and then use that to generate personalized   snippets of text that basically are going to allow  us to personalize the emails that we send. So,   hopefully we're all now on the same page.   This is a pretty niche service, but you know,   the best SASes do tend to be pretty niche and um  you know, that's more or less what we're putting   together. We also have an instantly API key for  one-click campaigns, which are basically where   we'll just upload the leads automatically. I  don't actually know if I'm going to do this   cuz the instantly API had a bunch of issues last  time I tried, so I might not. And then over here,   we have the actual prompt engineering. You know,  I want to generate like a highly personalized var   uh email, right? I want to say like, "Hey Pete,  been following you for a long time. I love what   you're doing at XYZ company. " because those emails  that I send when they're highly personalized   like that tend to land a lot better. So here's  where you can actually define the prompt that   we're going to use inside of the app in order to  generate these ice breakers. So you're an expert   sales SDR. Your job is to create a highly relevant  one or two sentence icebreaker so on and so forth.    This is everything here and the idea is  you'll get to change this over time and then you   know save and then see your new orders and stuff  like that. Okay, so hopefully now we're all on   the same page and I've created this demo. This  is basically like the vision of the app. What   I'm going to do now is I'm going to go through  and just make a bunch of changes. Um, I'm also   going to feed in like the API documentations or  the services that I want to scrape and use. And   then my agent should do a pretty good job to  start. This is great. The Appify scraper that   I'm using to generate leads doesn't require a  LinkedIn sales navigator URL. I'll give you the   Appify API below as well as everything that  you need in order to make this request, but   you'll have to modify the new Scrape job form to  reflect that. What we'll do is we'll pass in a job   name and then we'll have AI convert that job name  into a list of filters that work with the specific   um Appify scraper that we're using. We also need  a way to be able to click into the orders under   order history and then open them in sort of a  sidebar. Also, right now nothing happens when   I click those three little dots or the download  button. Obviously, we're going to need to download   these CSVs. Under the configuration section, let's  start with the Appify API token up at the top.    Then let's do the Anthropic and OpenAI API tokens  underneath. And then let's remove the instantly   API token completely and have the any mail finder  down below. The idea is going to be our Appify   actor is going to return most of the information  that we need rather than treat OpenAI's API key   as a fallback. Let's just treat it as another  option they could go through and then let's   just prioritize anthropic. For instance, if both  the anthropic and open AI API keys are filled out,   the model should automatically choose anthropic.   If anthropic is empty and open AAI is uh present,   then we should automatically choose open AAI.   And we'll just proceed in that manner. And then   for prompt engineering, I'm actually going to  give you a big long prompt that you could use to   significantly improve the quality of the output. I  want you to incorporate this. Once we're done with   the front end, we obviously need to work out the  back end and have all these functions available.    So, what I'm going to do is I'm going to create  av and then I'm just going to paste in all my   API keys for you so that you have them. You  can use this as demos to basically test the   backend functionality and we could use these  and store them um in a static database for now   just in like JSON files or whatever. When we  eventually push to our database and use superbase   um then we can make these more dynamic. I think  you have everything that you need. If you have any   uh questions or misunderstandings or  whatever, just give me a shout. Cool.    So now I'm just going to go through and then give  it everything that I promised. So the appy API is   going to be here. It's going to go right into  the app API docs. Now what we want is we want   to run the actor synchronously with the input and  return the output. I believe return the data set   items rather. So I'm just going to see if I could  copy this whole page. Can I copy this whole page?    Sometimes Appify has the ability to copy the whole  page for AI. Yeah, it does. So, copy for LLM.    Paste that in. See how long that is? That's super  long. Yeah, it's pretty long. And then I also want   to paste in the specific stuff about the actor.   So, this is the specifics about the actor. Input   schema for actor is here. And then, um, I also  promised that I'd feed it in a big long prompt.    So, I'm going to go over to Maker School wrapped,  which is massive document that I put together that   basically guides everybody through how to write  like super high quality cold emails. And then I   have a little prompt here that actually you guys  could use as personalization. So, what I'm going   to do is just going to type personalization and  start down at the bottom. There we go. And this   is going to be the prompt which I'm going to feed  in right here. Here's a personalization prompt. For the personalizations, use Claude Sonnet 4. 6  or uh GPT 5. 3. Check out both of their docs.    Okay. And then I think that has everything  that I told it that I would give it. I mean,   this is pretty long, right?   Just make sure. Okay. So,   I'm going to create av and then um paste in  all my API keys for use. That makes sense.

### [3:10:11](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=11411s) Integrating APIs

So I'm going to go over here and then just go env.   And then I'm now going to go find a bunch of API   keys on all the services that I promised it and  then just paste them all in. So this is going to   be my enthropic API key right over here. Then go  apply API key. So I head over to appy, go to my   console. There's always a way for us to grab our  API key from whatever service we're using. So I'll   go up here to API and integrations. We'll create  a new personal API token and I'll call this for   SAS app. Should I limit token permissions?   Should I set the expiration date? H yeah,   I'll set an expiration date just in case I forget  to delete it. Okay, this one's expiring tomorrow.    That's all good. I'm going to copy this now. Paste  that in. Uh I need my open AI AP. Actually, do I   need my open APK? No, I don't because I'm going to  use the anthropic one. Ah, I suppose uh the other   services that I need, I can find them by looking  at my Vit app right here. Any MailFinder API key, paste that in. So, we'll go to any mailfinder,  log in. I'm going to go up to the API and I'm   just going to copy this token right now. Go back  to anti-gravity. Feed that in. And we should now   have everything. So, I'm going to press enter. And  I think this is now going to be able to develop   the rest of our app, at least for now. Uh, this  is going to be like kind of what we see above the   fold. Let me just be smart about this. Don't  just paste the prompt in verbatim to the user   editable section. Obviously, it's pretty long. All  right, we've made a couple of changes here. Now,   we have find me VP sales and practice owners at  dental clinics in Canada. I want companies with 11   to 50 employees. That's kind of cool. If we go to  orders here, can we actually click on these? Yes,   we can. As you can see, we now get a little  sidebar. Um, the sidebar is kind of small,   so I'm going to adjust that in a second, but  it is still pretty neat. I mean, I can click   the download verified CSV button here. So, it's  pretty nice. I like this. I really like the fact   that we have this little job. It also pumps up so  quickly. It just makes it seem really snappy. And   here is the prompt engineering. So, the prompt is  just pasted entirely in now, which is nice. Yeah,   it's basically perfect. We do have um what looks  to be no training examples, but that's okay. These   prompt variables are going to be injected as  the first name to lead, last name of the lead,   headline, industry, organization name, location,  even their email address. That's going to be cool.    And then we also have our uh our tokens in. So  now it's just time to actually give this a try.    So I've just added the API keys right over here as  mentioned. And now we're basically good to go. I'm   going to wait for this thing to relaunch the dev  server and then we're actually going to test out   the flow. I should note that, you know, because  we are testing out what is essentially going to   be the core function of our app, just like with  a full stack app, like the probability it'll work   on the first try is pretty low. I found it kind  of interesting because a lot of people like they   judge AI by its ability or inability to do things  in one go. uh human beings rarely do things in one   go as well. The difference between humans and  AI models is silicon thinks at something like   10,000 times the speed. So you could just try  it 10,000 times faster. So you know whether or   not this works in one shot is okay. We're just  going to go back and forth until it works   reliably. Um and then from there we're going to  pump this up to netify just like I had before.    And then app number two, full stack app number  two, but total uh web app number three is going   to be completely cool. I've just done this. Now  it's storing what's called local storage since   of course we're always doing our first jobs  uh or our first check statically. So let me exit   out of my cloud API keys. Thank you very much.   Go right over here. Just relogged in and then   I'm just going to go scrape leads. So I'm going  to say and I imagine there are going to be some   issues here. Find me VP sales at dental clinics in  Canada. I want companies with 10 employees. Okay.    And why don't we do I don't know 200 leads. And  then we'll go laconic or lassic. I don't actually   know how to say that. Um and then we'll go error  executing leads workflow. Check console. I'll head   back to console and then I see that we now already  have some issues not found. So what I'm going to   do is I'm just going to scroll through this then  feed back to our agent. All right. After some   back and forth, it's now telling us it's good  to go. I'm not entirely sure if this is true,   but we are going to give it a try together. Uh,  I think it'll probably be over here. And then I   go slash scrape. Find me some practice owners at  dental clinics in Canada. One to 20 employees.    Cool. I'll press 100 max leads. We'll run the  workflow. We see here it's now doing what it's   saying is a search extraction. And it looks like  it hasn't finished it successfully successfully   because we're immediately getting a return  saying it's completed successfully,   but it isn't. Let me just paste this back. I  ran this on localhost 888/scrape returned this   and then I'm just going to paste it in. I'm also  going to uh paste in my um input as well just so   that I could, you know, monitor this and also  maybe have a little bit more meaningful of a   back and forth. Um but anyway, let's see what it  has to say. just as a form of parallelization.    While this is debugging whatever the appy issue  is that's leading to um inconsistent output,   I'm actually just going to have it adjust  the copy on the landing page as well. So,   let me see here. Hey, this is fantastic. I'd like  you to change the copy on the landing page that   it's a little bit more geared towards outbound  cold emails specifically. Um, also there are some   minor graphical issues like the start for free  buttons arrow is on the same is on a different   level than the text. I'm also seeing that there  are four cards under built for performance,   but the fourth spills out onto the second row.   Let's do six cards instead. The main value   props here are the breadth of contacts, the high  quality database, the high quality of enrichment,   um the simplicity of the tool, the affordability  of the leads relative to most other people. For   the AI personalization section, um under AI  personalization prompt, remove the export to   oneclick instantly campaigns and then change  the language so it's not start for free.    You just start. I'm also noticing that there's  no pricing section. Update it so that there is a   pricing section. And make sure that everything in  the navbar is like perfectly centered. Right now,   it's a little bit off, or at least it seems to be  off. Add a pricing section that is on average 0. 05 per credit. Every credit returns one verified  email. And then offer some higher and lower plans   um that scale with price. Obviously, when  you purchase more, you should get more of   a discount. Cool. So, I'm going to pump that in.   And then I'll say only modify the landing page.    There are other agents currently working on other  sections of the website. Do not modify anything   that is not the landing page. Also, don't you  don't need to rebuild. Okay. So, I'm going to   have that operating at the same time as our other  tool, which is fixing the appy scraper. And then   I can monitor this just by going back to command E  and checking out the agent um kind of conversation   here. If I go to under inbox, you can see my  two open conversations. There's this one here,   and it looks like we're still building or fixing  whatever the specific Appify problem was. Looks   like it has to do with like hash IDs or whatnot.   Okay, so this is a good summary of where it's at   right now. And then the landing page copy  builder is now doing some things. Cool. So,   it's analyzing the landing page. And now it's  going to go through and actually write it.    Looks like this search worked now on the uh  curl command that it created and it just did   this to validate without me actually having to go  through and then do it all myself on the website.    It's also reporting the specific issues. So there  was some location, some swallowed exceptions and   so on and so forth. That's cool. And it also ran  the live test and it's asking me to do it again on   um you know 888. So that's a different server.   Then I'll go what are we doing? Scrape. return   me owners of HVAC businesses in Texas. Okay, we're  still getting the zero completed. So, let's go and   debug Y. This is my input. Just go into the new  landing page update. We've now changed this to six   rows, which is cool. This looks kind of silly.   So, I'm just going to go back here and say is   currently on three lines. The on though the N  looks odd. Everything else here does look pretty   solid though. I like that we now have a growth and  pricing plan with the same style. 49. 99 and then   249. Super cool. And I'll just say let's dress  up that final CTA card down at the bottom. Cool.    We'll go back to our appy scraper, see how this  is going. Just shut over a request here. And it   looks like we are actually doing something which  is nice. Um, normally this would have immediately   errored out, but it's either hanging or it is  doing what I asked it to do. I think this is hung,   which is why nothing is occurring. If I  refresh this, I think the server probably   went down halfway through. The good news is we  are populating the database, although either   some design issues have occurred or something  is broken. But as you can see here, we have the   status, the date, and then the verified emails as  well. I'm seeing no problems in the configuration   side as well. So, it really is just the scrape  leads hangup. What I think I'm probably going to   do given that this has taken me like 10 minutes or  so just behind the scenes is I'm probably going to   go and just give it a bulletoint list of what it  needs to do. Like basically if you think about it   um it needs to interpret my request. it needs to  convert that into an input friendly JSON object   using um you know like a location table UTC.   Then it needs to send the request to um some   big long URL which is going to look something  like this just with a different appy token.    And then it needs to return to user alongside  CSV etc. I also think I might just simplify   the number of steps so that all we're doing is  the appy search extraction then any mail finder   enrichment for now. Um so I'm going to do that  next. Just heading back over here. Just going to   paste all this in. I'll say let's adjust the logic  to the following. Okay. So I ended up running out   of tokens halfway through this build. Let me just  show you guys what that looks like and then how   you can solve it. So, basically, if you use Gemini  3. 1 Pro, that obviously being the most in demand   model right now, given the fact that it's, you  know, new, really good at UX and stuff like that,   eventually you will probably run into some rate  limits. This case, this rate limit occurred after   about an hour of this working independently on its  own to solve some problem with some rate limit.    I just went and I walked away and then I came  back and then I saw that um sorry, with the uh   with the app scraper. And so essentially how you  proceed from here, at least my recommendation is I   would use a different model using the agent chat  UX. So I went down to claude opus 4. 6. And then   I said first generate a comprehensive prompt that  includes everything that we've talked about so far   so I can paste it into another version of CC. CC  being cla. I'm now going to copy this. Okay. Then   what I'm going to do is I'm going to open this  up in claude code. And not only am I going to   open this up in cloud code, I'm also going to do  something called fast mode because claude has an   additional piece of functionality that uh Gemini  does not currently possess. That is the ability   to go very quickly. I'm then going to double  check my extra usage. Looks like I'm 600 bucks in.    So I'm just going to go extra- usage. Keep in  mind you guys aren't going to be spending $600   and stuff on cloud code usage. Why don't I just  change this to 700? Um I just use a I use this for   like so many different things, right? juggling  five or 10 projects simultaneously. So for me,   700 bucks in additional usage might be I don't  know an additional 20 or 30 bucks per project.    Then I'm going to set that monthly spend limit.   Going to give that a little refresh here. Now   it's up to 86% use. So I have 14%. Okay. And then  I'm just going to exit out of this and then go   to a new one. I'm just going to paste all this in  now. I'll say proceed. And now there will be this   little lightning icon down here which denotes that  it's in fast mode. And then I get to make use of   um you know claude code or claude opus 4. 6  thinking I should say on fast mode while I wait   for my Gemini usage limits to come back. Now you  don't have to do this. If you don't want to you   know juggle multiple models like I'm doing right  now. If you're happy to trade a little bit of time   for speed then by all means absolutely go ahead  and just use like the claw opus 4. 6 built into um   the Gemini or agent chat inside of anti-gravity.   In my case, I want this to work as quickly as   possible since on kind of a time crunch here. I'm  going skating with my girlfriend. So, we're going   to see how much of this we could do in 15 minutes  just using the fast mode. And I'm happy to make   that time money trade um as necessary. What you'll  see about Claude is it's just significantly I want   to say more verbose with its notifications and  the information and it's also a lot easier to   follow along. That's one of the downsides of the  Gemini series of models, just like a little less   interpretable. Um, the thinking tabs and stuff  like that here are basically just in natural   language and I can follow along with them almost  as if it's me doing the thinking. Uh, which is   one thing I appreciate. Obviously, you do have to  weigh each of these minor pros and cons against   uh, you know, the model's ability to do things  like do front-end UX is really pretty and so   on and so forth. Cool. So, this looks pretty solid  to me. We now have the server. It's going to test   the API endpoint directly and it looks like we  have some internal server error. It's now just   going to go through and then update model ids and  make minor terminations um as to what the error is   until we're good to go. And it's telling  me that it is currently running an appy actor   run. So I'm going to take a peek at this right  here. Looks like we ended up finding five leads,   which I think was initially what we asked for.   Going to head over scrape here and I'll say HVAC   owners in Texas. Let's do 100 leads. We'll run  the workflow. Looks like we've now generated the   filters right down below. So, it's now scraping  leads with this poll. And um this is just for I   guess our own purposes essentially. You  know, if we ever want to modify what the target   audience is or our job name, we can do so just  by maybe being a little bit more descriptive or   less descriptive. Okay,  we've now completed the job. We have the CSV   over here and I can actually open it and you  can see all these leads are now scraped. So,   we were basically like 99% of the way there right  before I ran out of tokens. Just needed uh another   model to get it over the line. This looks great.   Now let's re add the personalization workflow.    Use claude sonnet 4. 6 as well. Okay. Now I'm going  to do the exact same thing. HVAC owners in Texas.    We're going to test the lead scraping. We can also  test the AI personalization as well. I'm doing 100   leads. So this should occur reasonably quickly.   Should be another five or 6 seconds. Okay,   looks like we're done with that. Now we're  doing AI personalization. So Claude in this   case is generating personalized ice breakers  for all of the leads that are in our database.    Something I'm noticing here is the AI  personalization is taking more than five   or 10 seconds. I imagine this is probably because  we're passing 100 rows sequentially or serially.    If you think about it realistically, you don't  need to do that sequentially or serially. You   could do that parallel in a parallel and send 100  requests simultaneously, whatever the rate   limits are. So, I'm going to ask it to do that.   I'll say batch the requests. Make do whatever   you have to do to make it faster. Okay. I'm then  going to rerun this. We'll go I don't know HVAC   owners in Canada instead of Texas. Let's just  make sure that lead generation uh filter thing   still works. So, this is now Canada. We still  have a bunch of size filters down here as well,   which is cool. Because I'm only doing 20, this  should occur significantly faster. We're now   moving on to the AI personalization step. And  then at the end, we're now at completion and   export. That looks great. We're going to download  the CSV. Just going to open this up again. Make   sure we have that personalization column. Where  is that personalization column? Here we go.    Hey, Jean Michelle. Revolutionizing luxury best in  77 is no small thing. Bane Ultra's legacy speaks   for itself. Wanted to run something by you. So,  I'm not really liking how this is looking. It's   just a little too much right now. So, I'm going  to want to make this significantly more casual   and cleaner. I'll head back to configuration.   Okay, these are looking a little better. Still   probably not the best personalizations we could  be doing, but I think just for the purposes of   demonstration, I'll leave it there. Hey Kate, love  what you're building at Posh, also in engineering   services. I  can see that work reasonably well as an email   icebreaker. So, let's just exit out of this. We'll  close this older one. And uh from here on out,   all we really need to do, if you think about it,  is we need to fix this UX problem. Um we need to   add authentication with Superbase. And then we  need to take this puppy live. So I'm just going to   do a big voice dump here and get it to the point  where the quality is significantly improved. I'm   going to do that as taking a screenshot of this  section. And then coming back to Claude, we'll   paste this in. Then I'll say, "Hey, the current  app looks great. There's just a few issues.    The order history page looks really squashed and  not at all like the rest of the pages. I want it   in that nice clean style um similar to the scrape  page and the configuration page. We also need to   put this live and uh get this on superbase. So  I'm going to set up a superbase instance and I'd   like you to assist me in the connection of that.   We need all of the fields of relevance including   um database fields for the configuration, the  prompt engineering, API integrations, basically   whatever you've done locally just applied to um  you know a database instead. Last but not least,   when you click on an order in order history,  it opens up this nice side modal, but it's   not very tall at all. I want it stretched out to  contain such that I don't have to scroll through   um the div containing all of the information. If  that's unclear, just let me know and I'll clarify.    I'm going to dump this in and then I'm also going  to just because I'm using a new instance of cloud   code here. Just going to go back and then I'm  going to copy all of this. And I'm doing that   because I want to give it context, but I also  don't want it to like go ahead and redo stuff on   the app ify scrape and so on and so forth. While  that's occurring, I'll head over to Superbase.    And then we'll click start your project. I already  do have a couple of apps set up. I think what I'm   probably going to do is just delete one of these.   H probably delete the proposal generator app and   then set up a new one just because I think you're  only allowed two on a free plan. And um I want to   show you guys how easy it is to set all the stuff  up. So just going to delete that. And then I'll   go new. I'm going to call this one um let's go  Nick J Wellsorg. We're going to call this leadso   DB. I'm just going to do a strong password  automatically here. Copy that. And then I'll   enable the data API. Click create new project.   I'm just going to give it all the information   that uh it needs in order to set up this database  just like I did last time. Okay. So, first thing   is head back to anti-gravity. I'm just going  to paste this in. That's my DB password. Then   I'll head over to this left hand side here where  it says project settings. I'll go project name and then we'll also go project ID. I think there's one more. We just  need the API key so we could do a   lot of that work for us. So we'll go secret key. And then we'll also go superbase public key.   We'll copy that as well. And this should have   everything that we need. I think what it's  going to do now is probably just set up O for   us. So head over to authentication where it says  email. And this time I don't actually want it to   confirm the signup. So I'm just going to go back  to emails and then where I click on sign on signin   providers. I'll just turn off confirm email. That  way I can make an account without having to do   that back and forth. Great. set up superbase and  off. I'll give a bunch of information here. So,   I think this is probably everything that it  needs and then we're just going to head over to   um SQL editor where it's going to give us  a bunch of SQL for us to paste in. Now,   my Gemini usage limit resets just in a few  minutes here. Um just because I have all of   the context inside of Cloud Code and it's going  through and doing this work, I'm probably just   going to continue in this Cloud Code thread  at least until I'm done this migration.    um then I can start up another agent chat  uh using you know anti-gravity's built-in   functionality and then have a conversation with  it. Uh in general you don't really want to jump   around between one model and the next unless you  can either fully export the conversation history   or you could do some sort of midway summary like  I just did a moment ago um from the anti-gravity   to claude or sorry from the agent chat to Claude  code direction. If I were to go the other way,   I'd do the exact opposite. I asked Claude to give  me a detailed project description of everything   that is currently occurring and all of its current  context. So I could immediately just segue that   into um the conversation with Gemini 3. 1 Pro  high. Okay, it's given us a plan and I've already   enabled this plan and let it go. So we have the  superbase URL, the anon key, service ro key and   and so on and so forth as well as a bunch of  other information here. It's going to start   with the environment variables, give me an SQL  migration file, do some client updating, add a   bunch of protected routes using authentication  middleware, finish the login and signup pages,   have a log out function as well, set up the config  page, do the orders page, do the scrape page, um,   set up the API layer, and then connect that to  Netlifi functions before finally building and   verifying. There's going to be some back and forth  there for sure. Um, but just like we did this with   Gemini 3. 1 Pro High, we'll do the same thing  here. So, I have the migration right over here.    I'm just going to copy all of this in. And then  we're just going to remove these little comments. And then what I'm going to do is just click  run. This will go through and then set up   our database. You can now see this in database  because we have a scrape jobs table with all of   these fields. The user configs table with all  of these fields as well. Any mailfinder key,   system prompt, instantly key, and so on and so  forth. And these are all going to be um sort of   fed into this authenticated user. So this is what  the authenticated user will sort of have access to   when they go from one route to the next. At the  same time, it's going through and then updating   everything that it's set up to do locally using um  JSON and JSL files to work through, you know, API   requests to the Superbase PostgresQL server to the  Superbase Postgrql database. And this is actually   a really good use case of using two different  models. The first is to build and the second is   to basically spot check what the first model did  without full context. The reason why is because   when you don't have the full context, your uh  opinions aren't really like polluted by the fact   that you're the one that spent all this time and  energy working on it. Just like you always have   like empirical or peer reviewers in papers and  and studies and research and stuff like that. So   too do I recommend doing this with models as well.   Having an unbiased third party review our code is   what is ultimately going to make our code and our  app significantly higher quality. Funny how models   are kind of like people in that way. We could  theoretically go back and forth and back and forth   with Claude Opus 4. 6 designing something, Gemini  3. 1 Pro High designing something else. Um, but I   think just one of these passes is good enough. And  in a way, that's what we're already doing with our   security audit if you think about it. Okay, it's  asking me to run the migration. I already did. So,   I'm saying done. Let's test it. It's now going to  launch this live. And imagine there'll probably be   some back and forth just like there was before.   Why don't we click get started? I'll say nick   sarif nick atniki. com and then we'll go I don't  know nikki nikki. Click sign up. Okay, we are   now being automatically taken to that config page  just like I wanted to. So here is where we'd set   up our keys and then we have that prompt which is  automatically set up. Okay,   I think what we need to do is we actually need to  modify this prompt to make sure it it's actually   like being reflected in the end result. Um and  then obviously we need a way to stick our tokens   in there. So, what I'm going to do for now is I'm  just going to go grab the ENV file here. I already   have my token. So, I'm going to copy this. I'll go  this API. Okay. Paste that in. Annie Mailfinder,   we'll paste that in. Enthropic. We will paste  that in. Okay. Now, I want to save changes.    Just reflect that this actually works. So, it  says saved. If I refresh this, I'm seeing that   the state is the same, which is good. If I make  a spelling mistake here and save, I'm seeing that   the changes are reflecting here as well, which  is good. I go to orders, there's nothing. Okay.    If I go to scrape leads now and I say, find me  a bunch of HVAC companies in Canada, owners of   and I go 20 leads, and  I run this workflow, is this going to work? So,   it's gone through and it's generated the filters.   Let's just see what it's saying here. It's now   scraping the leads. Now, we're doing some AI  personalization. And I'm just playing around the   UX here. This is nice. and smooth.   I like this a lot. I also like these cute little   animations and whatnot that it's decided to put  in. Okay, job completed successfully. I also like   how on the lefth hand side it's renewed. I don't  like how this little um scroll wheel animation on   completion and export continues. So, I'm just  going to head back, turn off the scroll wheel   animation on completed when the job is scraped.   When the job scrape is complete, completion. Okay, that'll be good. But for now, let's actually  download the CSV. We got our leads up here. Just   going to take a peek at them. Same thing I did  before. Okay, icebreaker is looking great. Love   what Proparts doing in modular construction. Also  work in the space. Love the tutor teach model.    Connecting educator students is no small fee.   That's reasonable. So this clearly inherited our   good um result. Then finally, if I go to orders,  we can see this is now populating our database   successfully. What happens if I click? Awesome.   We have all of the data. Looks really clean. We   have the parsed filters. We have the profile  scrape. You can actually download the verified   CSV here as well. That's clean. Very nice. Okay,  the last thing I'd say is this three. These three   dots don't do anything. Also, the three dots to  the right hand side of an order in order history   do nothing right now. Okay, that's clean. And  then if I go down here to log out. Okay. Well,   let's just quadruple check everything else  is good. Looks like it. We're back here. I think it was nikki. com, right? Yeah.   Okay, cool. Awesome. And I'm just going   to head back out and then test the rest  of my routes. So, if you guys remember,   there was scrape. Okay, that doesn't work. There  was config and there was also orders. Okay,   so all of the off middleware  here is working correctly. Um,   how's our landing page? It's looking pretty  clean. We don't have payment functionality yet,   which I'll cover in a second. This looks pretty  clean. If I click start, we go back. Nice. Also, dress up the footer a little bit more. It's

### [3:36:41](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=13001s) Logo and Branding

quite small right now. That's on  the landing page specifically. Okay, this is cool. I like that little like light  effect that we got in the background. Real clean.    Real clean. Um, product goes to product.   Pricing goes to pricing. Resources. Oh,   there is no resources link. So, we don't really  need that. Uh, I suppose we could probably make   a cute little logo. So, why don't we head over  to asstudio. google. com and just do that while we   can. I'm just going to see if I could link an API  key. Okay, I need a different account for that.    And over here, let's see if we can link a key.   And heading link   a key. Cool. Generate me a simple square  logo, minimalistic, uh, straightforward,   but immediately interpretable and high-end for a  lead scraping SAS called Lezo. And then over here,   the aspect ratio is going to be 1 one. And we're  going to see if we can generate a 2K um, result. I   should also probably find some inspiration logos.   This looks pretty good just because it's simple,   straightforward, and obviously it's sort  of unique. If this gives me a bad result,   then I'll say something along the lines of that.   No, sorry. Flat icon style. Look at the below for   inspiration. Mimic this. Okay. And then going  back to our landing page at the very bottom,   you can see we have significantly more context  including the logo, bunch of information down   here, and so on and so forth. I've also been told  that we should be good. Um, I just sign in here   on this little orders panel. This looks like it's  opening up something, but it's not showing up. So,   I'll just have to clarify a little bit more  what's going on. When I click the three dots,   it looks like the menu is being hidden within  the div. Then, if I go back to AS Studio,   we see we have this. This isn't bad, to be honest.   Great. Remove the text. Let's just keep the shape.    Okay. And I don't know if you guys could see  this, but at the very top right hand corner, we   now have our little custom logo put in. Um I mean  like I think this could probably be a little bit   bigger. So why don't we make the background color  a little lighter gray? Looks good. Why don't we   make the background color a little lighter gray?   Okay. And then if I go to get started, you can   see that we now have that little new Leadzo logo.   And the colors here match the uh sign up button.

### [3:38:53](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=13133s) Deploying Vibe Coded Projects on Netlify

So I mean, is this going to win any awards for  its design? Yes, of course. It's gorgeous.    No. Uh, jokes aside, you know, maybe I had a real  logo designer come in here or maybe I iterated a   little bit more on the logo, we'd have something  that looks a little bit better. But the rest of   it looks real clean. I mean, if I don't know, this  was an Nvidia logo or something. I probably think   this is like an Nvidia style interface. It's  wonderful. Um, so looks great. Let's launch   this thing. Now, because we've done a fair amount  of work on Netlefi already, we had to use Netlefi   to like do the backend functions or whatever. That  was the design um pattern that the agent decided   on. This is already on Netlefi. All we really have  to do is just change the URL and then create the   site itself. Just jumping into Netlefi here. There  is now a leadso project created a few seconds ago.    Um that is manually deploying. I don't want it to  manually deploy. I just want to show you guys how   you can link it with GitHub. So I'm just going  to pause this and say set up GitHub as well and   then link the two. And so this now apparently is  online. If we go here we have leadzo. netifi. app.    So this is actually on like a real URL. So we  could see up top. Um, I think this might have   made the uh logo a little bit brighter than I  was initially anticipating, which is cool. But   remember that I want this to be um, you know, on  GitHub as well. So, that's what we're going to   do next. First, it's going to initialize the  Git repo. It may ask you to sign in if it's   the very first time you've done this before.   I've done this many times before. So, my um,   anti-gravity instance is basically already linked  to my specific GitHub account. It's now going to   do what's called git ignore, which is take a bunch  of these files that probably shouldn't be pushed,   like all of my API keys, then ensure that those  don't actually go live. Now it's creating the   actual thing and then linking it to Netlify. It'll  handle whatever errors it has in its own syntax   mostly autonomously. Just checking for mobile  optimization as well by making my browser window a   little smaller and then dragging it all the way to  the left. This looks pretty clean to me. I don't   see any major issues. Nothing so far. Nice. Cool.   All of these are arranged the way they should   be. Pricing. Excellent. Okay. Get started today.   Beautiful. Now, how about the actual login page?    Yep, that looks good. Then how about Nikki? Nikki  is the password. Okay, so the actual app page not   super mobile optimized. Everything else is. So  what I'm think I'm going to do, which is my final   command essentially, is excellent. The landing  page and a sign-in pages look great, but the um   dashboard stuff after you sign in is not optimized  for mobile. Make sure that it works on mobile   displays as well. And while all that stuff's  going on, I'm also going to do our security audit.    What's cool is I could do a lot of these things  in parallel side by side. So whereas previously   I had Cloud Code do the security audit, I'm not  just going to paste this big security prompt into   Gemini 3. 1 Pro High for a couple of reasons. One,  I've already used like $800 of my Cloud Code limit

### [3:41:29](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=13289s) Security Audit Initiated

at this point and I don't want to spend anymore.   Um, another is that the Gemini model uh rate limit   runs out at a specific time and then like it's  usually back within an hour or so. I think they   do it like every 2 hours or 3 hours or something.   So yeah, I just uh Oh, and the third is I just   want to test how it is compared to the Cloud Code  experience. So, we're going to allow this whole   conversation here and then it's just going to  run through top to bottom and do that security   audit. Um, what's cool is now we're pushed to  GitHub, right? Because we're pushed to GitHub,   we can actually do a lot more of the um kind of  like uh version control based security things that   we couldn't do that last time because it was more  of like a because we had just dragged and dropped   the folder directly into NFI. So, it looks like  it's doing pretty well mapping out the front end   and backend LFI functions entry points, checking  ignore for secret management. I'm just going to   let this go on its own and then uh along with the  designed components and stuff like that, we can   get to that um when it's all done. Heading back  to the app, which is now online, I'm actually just   going to do one final mobile optimization check.   So, that looks really nice and solid. I'm now   going to sign in. We'll go nickniki. com. And then  I think the password was like Nikki Nikki. Um this   new scrape job here is looking really clean. As  you can see, we actually have that functionality.    Let me just move my head. We actually have that  functionality now where all of it is contained   within like a mobile browser um view which is  really cool. And then we also have that little   navbar. So I'm going to head to orders. Orders you  know it's going to be a little tougher by nature   I think but uh included this little horizontal  scroll wheel. And so I'm still technically going   to call that mobile optimized. I guess we could  just like redo the whole structure and have job   ID here, target request here, profile scraped  here, but it'd be a little bit annoying to do   that. And I kind of like having a table. Tabular  data is um notoriously different to turn into like   mobile optimized form when you're working with  tables and HTML. So I think I'll just leave that   there. This page looks really clean. I really have  no issues. Um I'm honestly quite pleased with   the performance of Gemini and Claude Code together  on this app. So 10 out of 10 would do again. Um,   we do have one more feature I guess which is that  feature that I talked about earlier where um,   you know, if it doesn't scrape the leads through  Appify, uh, sorry, the Appify codec crafter actor,   then I wanted to pass that off to Google Maps.   Uh, I think for the purposes of demonstration,   like we're pretty close to just wrapping up the  app. And the purpose of this was not to do like   some super crazy endto-end uh, like 500 different  platform scraping flow. The purpose is to show you   guys how to wrap around an API and how simple that  is. So, I think I'll probably just leave that as   that actor for now. But uh rest assured you could  very quickly and easily weave in uh you know logic   like hey if this thing returns zero leads then I  want you to use this other approach. Um yeah that   looks pretty good to me. I guess we could also add  that post any mailfinder step. H I might just do   that instead once we're done the security audit.   Um generally speaking though you do want to do   the security audits at the very end. So might be  skipping a step here. Not that big of a deal. Just   wanted to make sure we're all on the same page.   On the security side, if I just open up this agent   window, you can see that it has actually found  some major issues. Found major off bypass in the   API routes. It also found a hallucinated enthropic  package dependency. So, it's preparing some final   checks. That is a big deal, right? Um, you know,  it's done more or less exactly what I've asked it   to do. Go through with a fine tooththed comb and  see whether or not we can access routes without   actually having any sort of credentials. I can  open up the task right over here. And, uh, this is   where we're at. The first phase was where it was  just identifying and running through the codebase.    And the second is now where it's running through  every single step here sort of like a tabular way.    It's now finishing up the report generation.   We're going to take a look. So this looks like   it's quite critical. We have authentication bypass  and paid API routes, some hallucinated malicious   package dependencies, missing with check clauses  and so on and so forth. So, what we can do is we   can actually go through this whole thing and  not have this hallucinated anthropic package,   but instead use the atanthropic-ai- SDK. So, I  think what I'm going to do is we're probably just   going to push it. Okay, great. Do the security  fixes, make sure the app still works, of course.    And now we're going to run through this big list  of detailed findings and fix it. Of note, this is   significantly less secure than u the other app.   just off the get-go. And it's probably because   we have some additional functionality where  we're basically like piping through API requests   and whatnot, right? We're also using a slightly  different framework. We're using Vit instead of   Nex. js, which I think solves a few of these. Um,  in total, I think the score is like something like   70% or so, whereas the previous app, I think,  was a little bit higher. But yeah, you know,   some of these are quite severe. The fact  that you could bypass um the authenticated user.    So if they're not authenticated, it skips the  check entirely and proceeds to use the fallback   process API keys to execute the scrape. Any  visitor can hit this endpoint via curl or postman   without authenticating and your server will gladly  run expensive API ampy jobs, open a analysis or   anthropic calls all build to my personal account.   This is the same sort of issue that um I think   there was with OpenClaw at the time where um  you know you could just like bypass one of   the routes entirely, go on like their dashboard  and then if they had some little server bypass   uh setting or flag not like explicitly opted out  of then you could actually just use their own   keys. And so in this way a lot of people had their  keys used not only leaked but also used and run   up something like 25,000 people. It's yeah quite  a big deal. Looks like we're now installing some   input validation libraries and stuff like that  and it's fixing the bypass. I'll get back to you   guys when all this stuff is done. Excellent.   Looks solid. We now have everything that we   need. I'm just going to take a quick peek at the  final version of the app. Make sure everything   here works the same way that it did initially.   Opening up another list here. And this looks   solid. Excellent. So hopefully you guys now see  how you guys could use Gemini in conjunction with   cloud code and anti-gravity to build an app not  only that has full stack database authentication,   everything else, but that also wraps around like a  pre-existing API. As mentioned, a lot of fantastic   um SAS apps nowadays will either incorporate a  wrapped API as like their main functionality or   they'll like include this as one of the five  or 10 or 15 different things. Realistically,   like the software is no longer the moat. It's not  really that like, you know, you're going to build   something super incredible that solves a problem  that nobody else has ever solved before and then   you're going to package it in a beautiful UX that  nobody has ever put together before and then, you   know, put it on the internet and then that is what  is going to distinguish you out from somebody

### [3:47:49](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=13669s) API Wrapping and Functionality

else. And so in this way, you know, there are a  lot of short-term opportunities you could take   advantage of through app creation just by wrapping  pre-existing APIs that already do most of the   heavy lifting for you. And hopefully this Appify  example um was a good show of what that   might look like. And by the way, just so we're on  the same page here, this is just one tiny little   actor of like thousands of different scrapers that  you could use. Just scrolling through Appify here,   you guys see there's stuff like uh Trip Advisor  review scraper, DraftKings Scraper, there's   Instagram scraper, website content crawler,  tweet scrapers off Twitter, land. com search,   Instagram comment bots, and so on and so  forth. You could build whatever functionality you   want just by wrapping them around this service,  which is quite affordable um and you know,   straightforward and easy to use. And there also  a bunch of other services out there that are like   this that do um similar things. So, I'm not going  to tell you how to use one service or another,   but yeah, like this Appify or API wrapper game  is super powerful and it's blowing up right   now. The one thing that we didn't build today,  obviously, was the payments integration, which is   sort of like that final missing piece. Um, so I'm  going to talk a little bit about payments now and   then after I'm done talking about payments, we'll  actually go through and build our next app, which   is going to be one that allows us to go uh allows  users that use our app to go from everything from   like going on a landing page, clicking buy, buying  the product or service, having some tokens added   to their account, credits, and so on so forth,  going through like a full-fledged onboarding,   and then once the onboarding is done, basically  being able to use the app. And in this way,   we've successfully built up both our understanding  and then our capability from plain old websites to   um what will finally be like full stack apps that  combine everything that we've talked about here.    Okay, so let's have a brief conversation about  payments. We've obviously set up authentication.    We know what like the general flow looks  like. When somebody signs up to your app, they   can either get some sort of email notification  that they can verify after they're done with   that. Then obviously they get access.   A lot of this is handled through authentication   middleware and routes and stuff. Um, but basically  in our case with payments, we're going to add one   final step. So, basically the user is going to  start by signing up, right? So, we already know   how to do this. It's pretty straightforward.   It's off. After they sign up, they're going   to be taken to their own private payment page  where they can pick a plan or buy credits. Now,   if you're doing like a thumbnail lead gener a  thumbnail generator app, for instance, obviously   it's probably going to be credit based. Um, if  you're doing something that maybe provisions   access to like a subscription service or something  where it's like, you know, you pay once and then   you do it monthly, then we'll probably do a plan.   um after the payment occurs, they'll get access,   which is referred to as entitlement. They'll  use the app, which is called consumption,   and then in some cases, like if you're using  credits, they may run out, in which case they go   back to the payment. That's sort of how it looks  under the hood. In terms of like what's going on,   um we're not going to do the payment processing  ourselves. Basically, everybody on planet Earth   now just uses pre-existing options like Stripe.   And the whole idea is when a user clicks subscribe   or buy credits or whatever um we just have an  agreement with Stripe where via API we redirect   them to a Stripeh hosted checkout page. Stripe  already has all the language and handles the card.

### [3:50:37](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=13837s) Payment Integration Overview

They do things like advanced fraud detection.   you know handle your tax   obligations like receipts and stuff like that and  then they just send all of that stuff to the user.    We never touch a credit card number. We just get  paid you know in return for doing this. Stripe or   these other payment processors they usually make  like a couple percentage points. I think Stripe   right now is 2. 9 plus 30 cents per transaction  or something. Um, I'm very happy to pay the   2. 9 cents not to have to deal with this because  in addition to this being like a real cluster,   you know, don't want to swear too much on this,  but in addition to being a real pain in the ass,   uh, it is also kind of like a liability legally.   And, you know, as app developers, I want to   focus on building the app and marketing it and  stuff. That's what 99% of my work needs to be,   not handling the legalities. So when the payment  succeeds, and it will if you know the card   is not fraudulent, if they cross their tees and  dot their eyes, Stripe will send our backend a   web hook, which is basically just like an event  notification that says, "Hey, this user paid,   this user that you've already signed up for. "  So we have all their information and so on   and so forth. Their ID um is good to go. Then your  backend will receive that. It'll update a field on   the user's record in your database. So in our case  our superbase that'll be something like plan is   now pro or credits are 50 and then your app knows  what it's allowed to do and then you know as it   uses and consumes those credits every single time  it'll basically make a request to the database   just reducing that a little. Um and then you know  because it's like this you can now do a variety of   of cool features. You could provision additional  app um credits or usage if you want. You have the   ability to like upgrade people, downgrade  people, moderate your app and everything.    So, three models are onetime purchase, which  is basically where you pay once, you get   access forever. It's really easy to do. You're  basically just selling a service, right? So,   you just flip a boolean on their account. Um, they  sign up via the Superbase O function. Now, they   have like a little like user table. Inside the  user table, there's a field that says subscribe,   question mark, and then it's either true or false.   In subscription, it's pay monthly and then the   access continues. Stripe has a bunch of features  inside of it that manage recurring subscriptions   or billing um on let's say a monthly or a weekly  or an annual basis. And basically what happens   is once you have the payment success or payment  failure um you'll receive a web hook and then   you just toggle that access and then Stripe will  manage that for you every single month. Basically   uh whenever a successful payment comes in,  you'll keep it. If a payment failure comes in,   then you'll flip it. And then finally that  credit based usage where you basically just   buy a bucket of different um tokens or credits or  whatever the heck. every time they hit your API   to generate a thumbnail or scrape your leads,  you decrement the balance. When it hits zero,   you will send them back to checkout and then  force them to do it again. So, all of the apps   that we built in this course can use any of  these. Uh, if I was doing lead scraping, I   would probably do either like a monthly plan with  credits built in or I just do credits. Um, for   our thumbnail generator, we're just going to do  credits. But, you know, you can use whatever   combination of these you want as well. The three  things we're going to need in our codebase,   and keep in mind like our models are going to  handle this for you. You don't have to do this,   but basically we need an endpoint that creates  a Stripe checkout session and then redirects the   user. So after the user signs up, they're going to  have to immediately go to this endpoint maybe with   three maybe a page with three different pricing  plans or something. Then when they click on that,   it'll redirect them over to Stripe with their  information. Then we need a web hook endpoint,   which is just like a little um route on our  server that basically waits to receive a payment   succeeded event from Stripe. Then it'll update our  database. And then finally, we need some way to   check inside of our app before doing the expensive  thing like generating a thumbnail or whatever,   does the user have valid uh plan? Do they have  valid credits? So that's exactly what we're   going to do in the next product build. You guys  are going to see this hands-on. I just want you   to know that basically this just stands between  like the authentication step, okay, and then the   um like usage step. Basically now there's just  going to be an additional one which is payment.

### [3:54:14](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=14054s) Vibe Coding a Thumbnail Generator

Before obviously I let people use their own API  tokens and stuff like that in the app. So we sort   of bypassed this alto together. Now it's going to  be you know like us doing the thing and therefore   we're going to want to make some arbitrage. You  know they're going to pay I don't know $10 and   then every usage is only going to cost us $1. And  so in that way we're going to basically make uh $9   in profit. That's more or less how any meaningful  SAS business will operate. Okay. So hopefully you   guys are as excited as I am. Let's dive into  it. So, in order to make any of this work,   you are going to have to go to stripe. com and set  up an account. Um, I want you guys to know that   if you don't have, you know, like an account on  Stripe set up, you're not really going to be able   to follow along with me. But, at the same time, I  know that depending on where you are in the world,   um, different people have different levels  of access to Stripe. They're not available   in every country. So, if you guys aren't capable  of using whatever, you know, the specific solution   I'm going to do, I recommend just use whatever  you guys have access to. Like, there's Payaneer,   uh, I don't know, there's like PayPal. While these  services are not as clean and as good as Stripe,   they don't handle as much of, you know, literally  global GDP at the moment. They're up to 1. 6% which   is insanely bonkers. Uh they're still pretty solid  and, you know, there's a lot you can do with them.    Just trying to replace everything I'm about to  tell you with that. So, you're going to   have to go through some prolonged signup process  obviously and some of the stuff is going to take   a while to implement. You're going to have to, you  know, verify your identity and stuff like any good   payment platform. Um, but this is really clean  and it's a really good service. After that,   you'll be taken to a dashboard that looks  something like this. in the top right hand   corner there'll be a little test mode  toggle which I'd recommend turning on. If you   head to the top lefthand corner you can then go  switch sandbox and then click create sandbox.    That's what we're going to do. Um when you go  through that little prompt uh create it or model   it after you pre-existing Stripe account and then  you'll have an account that looks like this which   basically will just model over your real account  and then give you the ability to like collect   u publishable keys or secret keys at a  button. Make sure not to reveal these.    These are super important if you did reveal like  your real keys, not your sandbox keys. Um,   a developer would basically have full access over  literally everything ever, which is kind of crazy.    So, don't ever do that unless you want a random  $10 million bill in your Stripe account. They'd   probably cap it after a few thousand, but yeah,  would not want that to happen to you. And then   once you're done with this, you're actually  pretty good. We're just going to give our agent   the publishable and secret keys, and then it'll  like handle the rest of the payments for us. Okay,   so that's step number one. Step number two, I'm  just going to go back to anti-gravity. And then   now, let's exit out of this lead scraping SAS. go  open folder and I'm going to call this thumbnail   generator. Open this puppy up. And now we are  basically in a fresh uninitialized workspace   here with just the folder name. And just like we  did the first couple of times uh to develop full   stack apps. We're going to do more or less the  same idea. I'm going to go find a screenshot of   something that I like that I think looks really  clean and that I want to model my app around.    And then I'm just going to like voice dictate  give it a big dump of what it is that I want it   to do. And then I'm just going to have it like go  and give me its demo. Um, once we have that demo,   we can like in that little mining gif, uh, or  sorry, mining meme, we can like progressively   mine all the BS until eventually we hit gold.   And once we've hit that little gold cavern,   then we can actually do some work and make our  app better and better. Um, at a very high level   though, uh, let me show you guys how I'm thinking  that this app is going to work. So, basically,   um, just like we had before, you know, we want  a landing page. That landing page is going to be   like any relatively simple marketing page, right?   What's going to occur is there'll be a little   payment section. When they click on this payment  uh button or whatever, basically what's going to   occur is they'll be taken to the authentication  or a sign up. Um after they sign up, they'll be   taken to the ability to pay and that'll be  like the one click that takes us to like the   Stripe checkout. We're going to do this based off  credits. So after they pay, we'll then provision   access to the app. What's the app actually going  to look like on the internal side? Um well,   it's going to be pretty straightforward. You're  going to have a dashboard which allows you to see   all of your generated apps, uh, sorry, generated  thumbnails and everything like that. You're   going to have like a config page similar to the  scraper that allows you to do things like upload   images of yourself. Um, when you upload images of  yourself, uh, you'll be able to basically have the   model generate thumbnails for YouTube or other uh,  content platforms that include you. Uh, and then   we're also going to have like the generate page.   And this generate page is where we're going to   be able to, you know, put in some prompts  and stuff like that. and then it'll pass   through. And the idea is what we're going to do  is we're going to pass through using nano banana. And the way it's going to work is we're going to  feed in um like an inspiration thumbnail. And then   in addition, we're also going to feed in a prompt  with changes. And then it'll do its best to model   that. And it's not just going to do it once, it's  going to do it, I don't know, like three times.    And then it'll spit out, you know, three potential  options, A, B, or C. And then you just pick one.    And this is going to be the one that gets saved.   This is going to use our Nano Banana Pro key. And   so in that way, it's going to be consuming our app  credit usage. Um, we're not going to go through   the process of like signing up a developer app or  anything like that to let that happen because   sometimes some of these platforms are like, hey,  if you want to resell our tokens or if you want   to resell credits, you need to go through  some additional steps. Um, but basically,   in a nutshell, that's going to be your completed  one. And then this is going to show up in orders.    And then every single time we do that, if you  think about it, we're also going to um consume   some credits that they have because they're  buying based off of credits. So I don't know,   maybe every time we generate we'll consume three  credits and then I don't know, maybe like it'll   be like $1 equals 10 credits or something. We'll  keep it really simple obviously, but if you were   a business, you'd actually want to run through  like the economics of pricing and stuff like that.

### [3:59:49](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=14389s) Design Inspiration and Development

Okay, so pretty straightforward, pretty simple.   Um why don't we start with that first step which   is finding some design inspiration. Then I'm going  to do a big voice dump. After we're done with the   voice dump and the design inspiration, we're going  to produce it locally. Once we produce it locally,   we'll iterate test. Then we'll push it um to like  actual databases. We'll iterate test. Then we'll   make it live on Netlefi. Iterate test. Then  finally, we do a security audit. Same thing   that we did before. Just going to head over here  and I'll type web app because a lot of these are   mobile based and I just want this one to be  not mobile based for now. I want this to be   really clean. In fact, be like the  cleanest, sexiest app that we've developed so far.    So, I really like this design. That looks really  clean, but obviously it's not like a like an app,   per se. I also really like this design. Okay,  that's really sexy. I'm liking this like dark   kind of like glass. I don't know what it's called.   Isomorphism. Like, this is crazy. Activating new   brain paths. Look at how sexy that is. So,  we're going to go over something like that.    This one's really, really good. This guy Jack R is  a freaking genius here. He actually included the   font down below as well as the color palette and  everything like that. Um, this is for like some   app that supposedly monitors your brain waves,  which is wild. Uh, we're obviously not making   an app that monitors brain waves. We're making an  app that uh gets me more subscribers on YouTube,   but still super clean. I like this. And the fact  that he provided the fonts and stuff means that   I'm going for it. So, I'm just going to take this  image here, copy it, paste that into thumbnail   generator, and then I'm also going to feed in  just some design information. I'll say font lufka   um primary F4 E18E secondaries, and then I'll go  D6, D5, and then D. Is that a B or an eight? I   think that's a B. DB DB. Uh, anything else that  we need? We also have the white is going to be E3   E3 and then the black is going to be 043. Cool.   I'm just copying these over. I mean, obviously I   could just provide a screenshot, but I don't want  to consume that many tokens for what ultimately   amounts to just a few characters. Um, cool. This  looks really, really clean. I like this. So,   we'll see how this goes. I mean, I don't know if  it'll be able to replicate the glass eomorphism,   but that's fine. Um, and then we'll close out  of these for now. Now that we're done with that,   I'm just going to give a big voice dump of more  or less everything I've already told you guys. So,   I'm not going to include this in the video so  you guys don't have to waste another few minutes   hearing me talk about it. But, I'm just going to  go back here, double click my voice transcription   tool, and then go for it. Hey, I'd like you to  help me build a full stack application. I will   provide you with all the relevant API keys down  here for now. Build this so it works locally using   JSON files as a standin for the DB. Later we'll do  the actual superbase etc setup. Cool. That looks   pretty good. Um quite the long prompt here. That's  one of the reasons why I really like these voice   dictation tools. You can just bang out, you know,  10 times the number of words. And what's cool   is models are pretty capable at extracting your  meaning. Better just to talk like you're talking   to a human being. Spit out whatever you can and  then the model will extract the important bits. So   that's more or less what I did over here. It's now  going through this. It's generating um you know,   a file structure using uh next. js, which  is what I asked it to use. Um and then,   you know, I'm going to give it all the API keys  and everything like that after it's scaffolded the   base structure. Okay. So, from here on out, we're  just going to sit around and wait for this thing   to do its magic. Awesome. So, it just wrapped up  and I now have this live on npm rundev. I then   navigate localhost 3000 and this is what it looks  like. So, this is unfortunately just calling it   nano banana. I think it probably misunderstood  what I was saying, but that's okay. No big deal.    Just going to refresh this here. See that we  have a bunch of the social proof pieces here.    Global tech nexus, Nebula, and so on and so  forth. Professional thumbnail. Zero Photoshop   skills required. That looks pretty clean,  honestly. Simple, pay grow. Pricing. I like   that. Ready to blow up your channel. Create your  first thumbnail. Okay, so let's see what happens   when I do get started. Takes us to this page.   I'll just say nikki. niki@gmail. com. Continue with   email. Now we're being taken to a payment page.   This is really clean. I like this. Um hm. Going   to click pay $10 here. It's empty, but we should  still be good. And now we're on the thumbnail   uh generator side. So look at this generation  activity. Number of thumbnails generated per day.    No generations yet up here. Generate new will take  us to this page. And we actually have a pretty   clean UX. We have a generate magic inspiration  thumbnail. Generation prompt generated options   1 2 3. These are what are going to generate.   We have the number of credit cost. We have a   settings page here with a reference face. We're  going to need multiple files. So I'm going to   have to make that adjustment. And then you guys  can't see this because my face is in the way,   but if I make this a little bit smaller, you see  how on the bottom left hand corner, we also have   a credits available with a top up button. This top  up button is going to bring us back to this little   payment page. Okay, so it's really clean, very  sexy, and pretty straightforward app. That said,   I don't like the design. The design is sort  of like a big issue for me. So, I'm going to   have it generate um a new design because I don't  like this. There are also some minor changes that   I think need to be made. Notice how the margin  on the left moves around every time. Obviously,   we have some minor UX changes as well, aside  from the design that I like to make. And uh yeah,   why don't we pick a name? Why don't we call it  Thumbly? I think this is actually the name   of one of my startups now that I'm mentioning  it. It used to literally be called Thumbly,   and it was something similar. I was like creating  uh thumbnails for people. Oh yeah, look at that.    That's wild, man. I made this thing like probably  five, six years ago. That's a friend of mine,   Zach, that since worked with Scaling with Systems  and a bunch of other people. Anyway, super clean,   huh? Not gonna lie. Okay. This is how  it works. You basically generate   thumbnails and then you can select them. Man, I  coded this by hand back in the day. Uh, okay. So,   let's call this thumbly. And then let's also  make a bunch of changes. I'm just going to do   some voice dictation. And then I'm also going to  like have it really push for that high-end white   design style cuz I don't like this first demo. So,  I'm going to say let's call it thumbly feedback.    And now I'm going to give it a bunch. The design  needs to be heavily modified. It does not reflect   the provided image at all, unfortunately. On the  overview page, I'd like you to remove the average   CTR impact section and then replace it with  something else that we would realistically have   access to. The generation graph looks cool. When  I go between overview, generate, and settings,   I'm noticing that the left hand margin of the  generated of the um elements on the right hand   side are slightly off. I just want you to fix  them all so they're the exact same width. On   the generate tab, auto prefill the generation  prompt with the user's templated prompt. Add   a section under inspiration thumbnail where I  could just paste an image URL and then it goes   and automatically populates it. Under settings,  we'll need to upload multiple reference faces. So   have a ability to upload more than one, not just  one. And then in the default prompt instructions,   this is where you'd automatically insert some  generated prompt in the generate page. So   whatever the user writes here, I want reflected  in the generate page by default. And then the   user can modify that slightly as necessary. On the  landing page, remove all references to nanobanana   and replace with thumbly as mentioned. Add more  social proof here because we're running out of

### [4:06:56](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=14816s) Vibe Coding User Experience Enhancements

them pretty quickly as the business names scroll  to the left. Make the website landing page around   twice as long in general. Finally, I'll say the  app needs a major redesign. Focus on the light   theme as provided in the images above. Ensure  you're using the right font etc. We want light,   not dark. Soft glows and futuristic glass style  aesthetics. Cool. I'm now going to give it some   more time to make the required changes and  then I'll check back on the app. We're at the   next leg of that redesign. So, I'm just going  to take another peek at localhost 3000. Well,   it's definitely looking a lot brighter, which is  nice. Kind of weirdly yellow and green, which I   don't really know how much I like. Uh, let's go  to the dashboard. Ooh, this is much better. Much   better. I see that it's taking the inspiration  more on the actual dashboard side of things than   it did on the landing page. And that's okay. Okay,  cool. It also fixed that margin issue that we had   earlier. Um, I actually really like this. I'm just  going to zoom in a bit. Okay. I think what we need   to do is we need to just widen it a bit. So, I'm  going to do the same thing. Hey, this looks much   better. Could you widen the um elements in the  dashboard, the generate page, and the settings   page? I feel like they're not very wide right  now, and that just looks silly. Um also, what font   are we using? Are we using that provided font?   Some of the colors are a little too light now,   I would say, like the highlight uh color on  the left handmost navigation elements. That   light green or whatever it is, that neon color  is a little rough. So, I think we're probably   going to have to reduce that just for contrast  purposes. Um, are we using real glass isomeorphism   here? If you don't know what that is, um, I can  provide significantly more context. Anyway, uh,   we do have some major issues on the landing page  side of things. This looks pretty poor. I think   what I'll do is I'll just provide you a landing  page that I want you to copy verbatim like word   for word because just the way that you're using  shadows and stuff like that looks really silly   right now. Aside from that though, um, pretty well  done. I like this. I'll provide you that landing   page and then you can try copying it verbatim  u to start and then we can make some other   modifications afterwards. Here's the landing page.   Okay, that looks pretty solid. I'm just going to   go and I'm just going to find a really classy  isomorphism glass. Okay, glass morphism, I guess,   landing page. That makes more sense. Okay, we  just want one that like actually looks like a   like a real app, you know, not one that's BS. So,  let me take a look what has like that light theme. Okay, I like this. This is pretty good. You know,  one of my favorite things to do is just to open   up the local dev server and then just watch  as it slowly but surely updates the page and,   you know, incorporates your device. It's kind  of neat. So, it's just done that up here. Um,   it's just using some fake logo here to try and  mimic it, but obviously it's not the same thing   as the actual logo. It's like adding small little  elements here or there, changing like the colors   and the background and stuff like that. Um,  so that's pretty cool. Quite sexy. I really   like um being able to see that. It's doing the  same thing underneath with like the soft gradients   and then obviously changing the uh the colors  and stuff because some of the elements have not   been adjusted yet. Obviously, the background  in this case and the text is black. But yeah,   as it continues, it'll just get closer and  closer and cleaner to that actual pixel perfect   uh generation. Website's slowly getting  better and better. It's getting cleaner. Um   all these elements now are starting to match  color-wise. We even have that little down CTA   with that light blue. So, this is a much better  approach, I would say. Some other adjustments   I went through and then in uh a lot more detail  basically deconstructed everything that I wanted   changed. So I wanted to make the nav bar a little  bit square. I wanted to fill out the rest of the   dashboard underneath the hero header, make the  social proof section infinitely revolving and so   on and so forth. And the idea here is we just  want to get the app as close as uh possible   to basically perfect aesthetically speaking  before I do all the rest of the work. Okay,   we got the website right over here looking really  clean. Notice how we've gone through and then   actually adjusted the dashboard down here. That's  really, really sexy. Um, I'm not liking the slight   difference in Oh, actually, no. That's basically  perfect. Why don't we just, um, I think I'll   probably square out all the buttons everywhere.   But anyway, this stuff's looking real clean. We   have the pricing down below, ready to blow up your  channel. I'm just going to go to dashboard. Let's   just see how the actual functionality of the app  is. This looks pretty good. Um, I don't really   like the light blue in the back, so I'll adjust  that as well. But everything else is looking good,   right? Like the margins are basically all the  same. Um, we also have emphasize contrast. So   now the generation prompts are autopop populating.   And yeah, I mean, I'd say this is pretty great. I   don't like the background blue on the um inside  of the app page, like the dashboard to generate   the settings. That component looks weird to me.   I'd like some collection of soft gradients on the   background of the hero header in the landing  page. And then I'd like you to turn all pill   shapes right now into those rounded squares  instead. I think that just looks a lot better.    For instance, the signup button in the navbar,  the real-time generation from your prompts widget,   and the dashboard in the hero header um image. I  want all of those little pill shapes converted.    Aside from that, change define to thumbly. I  want you to make sure that those two buttons,   filter by CTR and plus new thumbnail, are just on  one line. Right now, they're both on two. Adjust   the verbage if necessary. And then everything  else looks really clean. Yeah, that's about   it. All right, this is looking a lot cleaner. We  have everything that we need on the landing page.    Um, I like the fact that the cards no longer  look that ugly, atrocious blue. At this point,   all we really have to do is provide  all of our API keys and tokens. So,   as mentioned, I basically want to reproduce  the functionality of AI studio. google. com,   except I want to be able to provide a thumbnail  and then a bunch of my own faces and then just   have it replace the image in the uh thumbnail, or  rather replace the person's face in the thumbnail   with my own. This is a pretty common thing to do  on YouTube nowadays. Basically what you do is you   find like outlier really high quality thumbnails  and then you just replace them and make some minor   adjustments. Um I'll show you guys what I mean.   If you head over to this app here, one of 10, and   then you go down to, I don't know, videographer or  something, and you know, just look for something   like this by this fella here, Kristoff Oliver. I  mean, like, is this the best thumbnail? Actually,   no. Let's use this one. This one's probably  nicer. So, you see how there's like, you know,   some fella here in the middle and then there's the  text around it and then there's some little image.    So, I mean, like, you know, I think you'd probably  design something better than this, but still. I'm   just going to save this image. Head over to AI  Studio. I wanted to just switch my account to   one that actually has credits. What I'm going to  do is I'm going to stick this puppy inside. Then,   I'll say replace the man in the thumbnail with  profile picture provided. Then, I'm   going to look for a picture of myself. I like this  one. This one's pretty funky. So, I'm going to   say replace the man in the thumbnail that includes  how to build a portfolio with a man in the profile   picture holding a trophy. Okay. So, what I want  basically want to do, what I'm instructed to do is   to take this and then just swap it out for this or  something close to that. So, I press enter. You'll   see that it's not going to do the most amazing  job right off the bat, but it's going to do an   okay job. And basically the whole idea is we're  just going to run this multiple times until we get   like three or four options. And then we're just  going to present them to the user and then they   can just select one that they really like. And  scrolling down here, you can see that we've since   replaced that man just with me holding my trophy.   So it didn't get like exactly what I wanted to do.    Obviously I don't actually want to be holding the  trophy, but you can see that I'm in this fell's   room. And for the most part, it looks like me. I  mean, there's some minor little changes in terms   of the skin texture and stuff. Um I think my skin  texture is worse and it's like done some done some   touch-ups, but you know, it's got my hair. It's  got me holding the trophy. didn't add any extra   AI fingers. And yeah, that's more or less what  we're doing, right? So the question is, how do   we actually do this in our app, not inside of this  as studio. google. com thing and it's pretty easy.    There's just like a bunch of API routes for image  generation. We just basically need to reproduce   the same flow that I just did here over there. And  then we need to um connect API keys and tokens and   stuff like that. So I have an API key over here.   Uh I'm just going to I don't know. I guess I need   to find a way to copy this API key. So why don't  I go to get API key here. We'll create a new one.    And I'm just going to call this um thumbly. Going  to click create. We're now going to have the key   generated right over here. Okay. And I'm just  doing this in a new one because I want to be able   to turn it off. I'll then go back to anti-gravity.   And then, okay, it's just done some changes for   me. I don't know exactly what. Then I'm going to  open up av file and then I'm going to say Gemini.    I think this is Gemini, right? What is this one  technically called? uh maybe like nano banana API   key and I'm going to paste that in. Um there are  a couple of other things that we need if you think   about it. So this is not enough. We obviously have  to go through the whole superbase spiel and then   get a bunch of images. Sorry, I get a database  from there. So I'm going to set up a database on   Superbase just like I've done before. Head over to  superbase. com or rather I think it's database. new   is even faster, right? Yeah, there we go. I'm  going to do it inside of proposal generator. app   maybe gyro. Okay, never mind. I need to go and  delete one of these old ones, so bear with me   one second. This is in the leado database, right?   So, I'm just going to delete this project. Leadzo   DB. Cool. Thank you. Delete. Um, and then  I'll go to database new. Once that's done,   now it's going to say, hey, let's make one. I'm  going to call this one um Thumbly DB. Again,   I'm going to generate a password. Copy that  password over. Enable. Oh, cool. They also now   have automatic RLS, which is cool. So, I'm going  to create a new project there. And what I want is   I basically want to um paste in my database  password. Let's say superbase DB password.    Paste that in. Um I don't know, superbase  project URL. Paste that in. Previously, I   did this just directly inside of the um you know,  agent chat, but this time I'm actually going to   copy and paste it over to the CNV. So, Superbase  publishable API key. I'm going to paste that in.    I think there are a couple other ones. You know,  I just want to give it my API key as well. So,   we'll go superbase project ID. Paste that in.   You can see it's the same thing as in my URL. So,   basease project name I'm just coming up with all  excuse me, all this stuff   um myself. Like I'm coming up with these names  myself. Um these aren't really important. The   model can understand the context themselves.   Okay. So, I have more or less all of that,   which is cool and pretty clean. Um, and then yeah,  now it's just provisioning my database and API   input. It's actually creating them for me. So once  all that stuff's good to go. I'm just going to   paste that in. Any other additional functionality  we need? I don't think so. So I'm going to say is   I've added a bunch of uh credentials for nano  banana and then superbase um into the env file.    You now have everything that you need in order  to actually build out the functionality of the   app aka the API calls. I'll go call or find the  um specific endpoint to reference. But basically,   we're going to be replicating the functionality  of um Google's AI Studio just inside of my app.    Let's see. ENV. Cool. And then, you  know, there should be the ability to grab the code. Okay, cool. And there  is. So, I can grab this code. And then   we're just going to go rest here. And  then what I want is I basically just   want to copy all of this stuff. And  then I'm just going to paste this in. Here is some REST code straight from their  dashboard. And then I'm just going to paste   this in, which should be everything that they  need in order to actually like generate the   the thing. Keep in mind we're going to  be supplying two inputs. The provided   thumbnail image and our prompt uh I guess  three inputs. The provided thumbnail image   um images of the person's face and then a prompt check there. Let me see. Are there any docs  or something like that I could use to give   me more data? Okay, check their docs if  you need more on how to do this. First,   test all of this via curl to make sure it  works. And then once it works, you can put it   on the app. And then finally, I'm going to just  provide some base um data here. So, you know,   earlier I had that portfolio builder image. So,  I'm actually just going to supply these images.    Um, so this is going to be one image. I think  we can just open this in a new tab. Okay. No,   I guess we can't. So, let me just save the  image. This is going to be the supplied. Okay,   this one over here. Then I'm going to move into  anti-gravity. Just upload this to the agent. I've   provided you three things. supplied the image to  insert a face into um face the image to get the   face from and then prompt and the prompt is going  to be here. Let's just save this too. Uh this is   pretty big actually. I don't know if we'll be  able to feed all this stuff in. Let's say face And uh it should be able to pull all  of this data up from just the names. Okay. In case like unless we get blocked, we  should be good. Just going to double check this   because we have supplied like a lot of image  files here. I mean this was like 4 megabytes.    This here was like I don't know megabytes. So  in total it's going to be like five or six megs   which is actually pretty chunky. Maybe they like  automatically resize the images or something so   it's not taking up a massive amount of tokens. But  um you know I always do kind of worry like oh am I   going to run out of usage and stuff. Okay. So I'm  gonna allow this conversation. It can do more or   less whatever the heck it wants. And then um just  double checking thumbly. Yeah. I mean like this   honestly looks really clean. I'm liking this quite  a bit. Nice. And then we have like this infinitely   revolving social proof section here which you know  you stick your own social proof in. And then all   of the um buttons and stuff like that are square  now which is cool. And everything is just a little   bit more squared off. I don't actually like this  shadow. There's a slight shadow in the background   here, which hurts, but not the end of the world.   We have the ability to change this. This is nice.    Cool, cool. Awesome. I mean, like, you know,  I think this is basically like the MVP of   um a high quality app with the landing page. So,  wonderful. I'm just going to wait and then um let   you guys know when we're done this next step.   Looks like it's already making API calls, which   is cool. Just using everything that I provided it  below. Generative language. Google APIs appears   to be the endpoint. That's pretty nice. And  so it's gone through and actually verified   that this works and it's created um another step  inside of implementation plan. So now it's going   through and then integrating this directly into  the app. So it's not just going to be doing it   via its own curl requests, but I'll be able to do  it via uploads files and stuff like that. Okay. So   just signing in here. We've now integrated the  um database functionality. Going to go over to   generate and see if we can do this. So you know  I can obviously add images and we just did. So   now we have this cool little blur effect which is  really nice. Let me see. Keep the style identical   to the inspiration image. Make the main subject  highly cinematic with dramatic neon backlighting.    Contrast. So no, I'm going to say but replace  with the user. Oh sh uh crap. I need to actually   provide images, right? So let's upload some faces.   Let's do face. This is now me. Okay. And then here   inside of the default prompt instructions, I'll  say replace the thumbnail image with the supplied   user cinematic. and I don't know dramatic lighting  on the face. Replace the face of the person in the   provided thumbnail image with the face of the  supplied user. Cinematic and dramatic lighting   on the face. Let's save the config. I'm just  going to refresh this. Has that been saved? Okay,   it is. This has been saved as well. Okay, that's  great. You know, might as well test one additional   piece of functionality here, which is if I could  just paste the URL in. So let's go back here,   paste that in. Okay, cool. So we've actually  we've actually now got this in the URL, too,   which is clean. I'm going to click generate  variance. And this is really like the test   of the functionality. So I'm going to give  it a few seconds. Then I'll double back with   um you know, changes if it didn't work, and  then maybe some next steps if it did. Okay,   we've actually generated one of the options here,  and it looks interesting. Um for whatever reason,   look, it's like the background's kind of white. I  don't know. And we've only done one, so we want to   do three, right? Obviously, we're going to want  three. I see there's some click functionality,   which is kind of cool, but um yeah, we're going to  have to do more. So, the first thing I mean, the   dramatic lighting looks freaking badass. Like, you  know, it's not exactly my nose, to be honest. It's   a little bit different for me, but still really  cool. Hey, we've um generated only one, not three.    So, just double check and make sure that there  was no issue in the background that prevented us   from doing um all three simultaneously because we  want to populate that with three thumbnail images,   not just one. Also, when the images came out, they  had this sort of like white sheen or overlay. They   looked kind of transparent. I just want you to  remove that. Um, so that I just can see the actual   image immediately. Uh, and yeah, I think that's  about it. What's interesting is while it did that,   it consumed three credits. Okay, so the credit  consumption functionality is there. However,   when I saved this, it saved it twice. So, that's  another thing we'll have to change. This time   we're going to do the same thing just with the  supplied version instead. And then I should just   be able to click generate variance and we should  be able to do three, right? Since we're generating   three times. So credits available um on the left  hand side, which you guys can't see. Say 197 right   now. Okay, now we have three provided variants.   These all look awesome. I'm loving this. Loving   the really badass lighting on the face. That's  neat. Um so now what I'm going to do is I'm just   going to select one of the variants that I want  to keep. So why don't I select this one? That one   looks probably the most realistically me anyway.   And then I'll click keep selected thumbnail. It   says thumbnails saved to your gallery, which is  awesome. Okay. And then we go back to overview.    And then we can see this new one here. Beautiful.   Okay. So, I guess what else we need? Like the   first thing comes to mind is we just need a way to  like delete these, right? Provide a way to delete   um the thumbnails under recent generations.   Basically, I want to be able to delete ones   in my gallery so that I don't have to see them in  the database anymore. Um aside from that though,   everything looks like it worked really clean. Oh,  um, instead of like the alert that comes up, um,   just make like a nice modal, a nice toast message,  um, that then allows you to, um, I don't know,   open it in a new tab or download the image or, uh,  go back and generate a new one. Also, just little   things. I mean, these intelligences are so dang  good. Notice how in this one here, I don't have   the O behind my neck, but in this one, I do.   Like, it's, you know, it knows the placement of   the O and where it should be and stuff like that.   But yeah, um now that we're done with all this,   what we're also going to do is we're going to  uh like after we get the little X functionality,   we're going to hook this up to Superbase and then  it's just going to give me that migration script   so that I could use this in like real production  scenarios. Then on from there, it's connecting   it to Stripe so that the payments work and then  yeah, everything's just going to be 100% live,   which I'm really excited for. Speaking of Stripe,  I forgot, but I do need to provide the keys there

### [4:26:59](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=16019s) Deploying Vibe Coded Apps to Production

as well. So, let me head over to Stripe, sign  into that sandbox. It's right over here. And then   I'll give both the publishable key and then secret  key. So stripe publishable key, stripe secret key. Then I'm just going to save this and say, hey,  I've also added the Stripe publishable key and   Stripe secret key. I want you to connect the  payment feature as well. You may have to adjust   the SQL migration script. So um do this first.   Okay. And the really cool thing is I can just   queue up messages. So even if I change my mind  or do a bunch of things, I can have this message   sent. I can then read that message and then just  um incorporate it in the flow. I don't actually   have to wait until it all finishes. So that's  pretty clean, huh? Pretty stoked about that.    While we're waiting, why don't we test this on  another thumbnail? So I'm going to head back over   to generate and then I'm going to paste this in.   Going to set that. I'll say replace the face in   the provided thumbnail which is the face applied  to use cinematic and dramatic landing the face.    Also replace 100 to 1,000. Let's see if maybe we  could get um a slight little variant of the actual   number in the background as well. Generally  speaking, my experience with these AI models,   you only really want to suggest one major change  at a time. So maybe what I could also do is add   like a little tips feature or something like that  so that people know um how to prompt these things   and get the best results. Nothing like clean work.   This one here looks real good. I like it. We have   the 1000 in the background. Also dramatic lighting  on the face. That's cool. And this one has   dramatic lighting on the face with my actual skin  texture. Thank you, Rosa. Um, honestly, I think   all three of these are really badass. So, I'm  going to keep this one. And as you can see, I'm   going to have a toast message instead. So, I can  download this image. I can open in a new tab. Uh,   that one doesn't seem to work, so I'm going to  have to modify that. And then I can also click   generate another. It'll take me back to this page.   So, really, really clean functionality. I mean,   this is basically exactly what I wanted. Just  wish it could be packaged in a slightly better UX,   but we'll solve that later. It's now going  through and just doing a bunch of Stripe stuff.    So, creating API routes, resolving TypeScript  errors, and so on and so forth. I'll let it go   and just do that thing. um as it wills and then  we'll double check how all that works with SQL   and we're done with that. Okay. Now I'm going to  use the uh big thing inside of Superbase schema   migration script the file that it created for  me. Then just hold command and press enter. I   realize I used to think that you couldn't have  comments in here but uh you can. It's just the   comments that the previous model did for me  were I think like with two hashtags instead of   um two dashes. As long as there are two dashes,  you can basically pump this whole thing in and   there are no problems. And it's always good  once you're done with that just to go back   to database and then you can see how everything  interacts. So see the model here is set up ID,   user ID, original image base 64, prompt, generated  URL, selected URL, and created at as well as ID,   email, credits, Stripe, customer ID, subscription  ID, default prompt, face images B 64, and then   created at. This is where we're basically going  to store their status. Okay? And then over here is   where we're going to store the number of credits  that they have. So if they have a subscription ID,   then they will have been signed up. Um,  obviously if they have credits, any credits,   then we'll populate that. That's where we're going  to get this from. Um, and then if they're at zero   credits, then when they attempt to make a thing,  it'll check their credit balance. And, you know,   because they don't have any credits, that won't be  able to uh work. The primary key of thumbnails is   ID. Primary key of users is ID. These two things  are sort of mapped together. And then, yeah,   everything else here looks pretty solid to me.   So, just heading back to anti-gravity. Right now,   what it's doing is just finishing up that little  migration from uh mock routes, which are when   you store all of the database files and like, you  know, your local computer to ultimately like   live supabbase instances. And it's just doing a  build right now to verify that everything works   uh the way that we told it to do it. And as you  can see, I've just signed into this supposed new   account here and uh we are now at zero credits  available. So, it's pulling it directly from the   database. Meaning if we want to run the full flow,  we now have to go through create a new account   and then run basically the entire signup flow.   So I'm just going to go back to anti-gravity,   verify that everything is good. Awesome. Live  database has now replaced our prototype API   structure. I've now done it all. So we should be  able to test this. Just going to head back first   to Superbase and then I'm going to turn off the  feature of authentication that forces us to um   confirm our email. So you can do that in signin. I  just do that because it's a little bit faster. And   I realized after that first build, I was spending  just as much time, you know, signing up as I was   doing everything else. Now I'm going to click  sign up. And this is sort of the desired user   flow. So we'll go nick@niki. com. Continue with  email. Let's see what happens. Just says signing   in. There's no password. So this is a problem. Um,  notice how before we always had an email address   and a password. Now we just have this like email.   So I think this is probably a blind spot where it   didn't really realize, oh, okay, we're connected  to Superbase. Now we have O. So we're going to   need an actual like login page. Hey, the login  right now only requests an email, but I need to   authenticate with Superbase. I'm pretty sure we'd  need an email and a password. No, I just tried   to create one and it didn't really work. There  were some errors. Okay, so now going to see if   maybe I'm already logged in or something.   We go to payment. Yeah, no, we can't. So,   I mean like the middleware routes are working as  we could tell with dashboard and stuff like that.    Everything redirects us to login. It's just the  actual login doesn't seem to be um set up yet. So,   we'll double click that. We'll double check that.   Um, it looks like we also added some additional   landing page stuff here, which is super cool. So,  this added a whole new section based off what we   added. AI power generation, AB testing, clean  modern aesthetics, and so on and so forth. We   also have some FAQs here based off how it works.   So, that's really cool. And then we have the ready   to blow up your channel. Um, Gemini will do this  from now and uh every now and then. I don't really   sometimes it's sort of annoying when it acts  without necessarily asking you, but in this case   it was what I wanted because really early  on in the prompt I said, "Hey, I want you to make   this longer. " And then it said something like,  "Oh, I don't have enough context to make this   longer. " So I guess it just like generated its own  context based off of our conversation history. One   thing I really like about this app is just how  fast it is. I mean, each of these routes are what   are called preloaded or pre-filled. And so this  is me like really quickly going from one page to   the other. And just notice how this whole page is  just like automatically done. Um, I also really   like these brief little animations where you, you  know, start at the top and work your way down,   loading each element slowly in succession. You  just get the, uh, visual appearance of very fast,   very performant website. Okay, we have some  new superbase schema. So, I'm just going to   jump over here and then what this is going to do  is go through and then add the rest of our users,   tables, and stuff like that. So, back to SQL  editor, paste this in, run. Okay, the updated SQL   script seems to have worked. So, I think we just  added one or two additional records here and then   allowed it to add like the email and the password.   Heading back to Thumbly, if I go click sign up,   we're running into Superbase URL is required.   So, they do have some runtime error. Now, I'm   just going to paste all of this in. Okay, this new  signup page seems to work. We'll go nickniki. com.    Then, Nickniki. Um, I'm going to click sign in.   Invalid login credentials. The reason why it's   telling me this is because we obviously don't have  an account. So, I'm going to go back to sign up   instead. I like that it keeps the email address  and the password. I don't have to redo it. Okay,   we now have the secure checkout with the starter  plan with 100 thumbly credits. So, now what I   can do Okay, because we're we clicked the starter  plan. So, I can go Oh, actually, did we click the   starter plan? Hold on one sec. I don't necessarily  just want to buy the starter plan. I might want to   buy pro. Let me try agency, actually. Okay, we'll  go nickniki. com. And do we have the account? Oh,   you see because we exited out of the um payment  flow, it immediately jumped us into dashboard, but   it selected the starter plan automatically. So, I  need to change that. Right now, it's automatically   selecting the starter plan. You should allow the  user to select which plan they want on the payment   page. It should also take into account which  button they click on the landing page because   there are three different payment options there  as well. Just going to enter this in and then   I'm going to proceed to check out just to see  what happens. When I click proceed to checkout,   nothing occurs. And I think the reason why is  there might be some problem here. Additionally,   when I click proceed to payment, nothing occurs.   Do we need to open up a Stripe checkout window or   is the payment occurring locally on the platform?   Keep in mind, I'm using a Stripe sandbox, so we   should be able to test the payment and have all  of the events and stuff like that run true. Hey,   more pointedly, um, since I am now signed in, I  should be able to go to the dashboard even though   I haven't done the payment. If I go to overview  and then click generate new and then actually go   down to settings, can I upload my face? So, we go  supplied face. Okay. And I'm just going to refresh   this. Am I still here? Okay. So, I'm not actually  keeping the reference faces in. And this could be   because my account is not like set up yet because  the payment hasn't gone through. I'm not entirely   sure. Let me just make sure everything else works  here. So, face that goes through. All right.    If I click generate variance, what's going to  happen? Please provide an inspiration image and   a prompt. So I have the inspiration image here.   The prompt is right over here. So we also have an   erroneous error message where it says please  provide an inspiration image and a prompt. Hey,   I provided an inspiration thumbnail and a  generation prompt. And I clicked generate   variance, but I'm getting an error called please  provide an inspiration image and a prompt. I think   this is occurring because I don't have a reference  face. However, that error is not representative of   the real problem. If this are if this is the case,  I've also noticed that when I click upload face on   reference face, then I click save configuration,  nothing happens. And then if I refresh,   my reference face is gone. So make sure that  the save configuration button works. If it's   not working because of some frontend error,  fix that. If it has to do with superbase,   let me know if there's anything I need to do on my  end. And I'm just going to continue going through   this and seeing if there are any other errors  that I could spot. Obviously, I'm going to sign   out again because I'm on a local dev server. This  is all occurring in real time. So, any updates I   make to this is going to be reflected. Um, but we  do need to make sure that if credits available are   zero that we immediately jump back, right? So,  some other design decision. If a user has zero   credits upon signin, we need to redirect them to a  payment page where they could select um, you know,   how many credits to purchase and stuff like that.   That should occur every time a user is at zero.    Now, if you're noticing, I'm not actually  just like doing waiting, checking the feature,   and then proceeding to the next one. I'm now  at the point where I'm just dumping in a bunch   of changes. And the reason why is because most of  these changes are relatively minor. Uh, you know,   it's probably just some slight little database  misconfiguration or whatever. And so, I can   actually proceed in this way. Um, have it working  on a change while I'm like modifying the rest   of it. On the landing page under everything you  need to win the click, I don't like the shadows   in general. I'd actually like you just to remove  shadows across the entire UX of the website. It   they just seem a little bit off um given the fact  that most of the website does not have shadows and   does not use them. Under the frequently asked  questions where it says how does thumbly insert   my face? Can I use any images inspiration etc. The  title text is good. So how does Thumbly insert my   face? Is written in like this nice black text,  but the subtext that says when you upload your   reference photos in the dashboard settings, our  models learn your facial features. That's a little   too dark. Can you lighten that just by 10% or so?   In this way, I'm sort of arbiting the time between   the changes that are occurring here and then um  you know my testing. So, signing in, going back   to the dashboard. Let's go to top up. Okay, cool.   And now we have the ability to select these three   different plans, which is cool. Okay, so why don't  we pretend I'm doing pro. And then every time I   click redirecting to Stripe, looks like there's  this problem which pops up. So, I'm actually going

### [4:38:34](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=16714s) Debugging Payment Issues

to copy this over then say every time I try making  a payment by clicking the proceed to checkout   page, this error occurs. But I mean like you know  we could also parallelize this and do a bunch of   them simultaneously. No real need. Um but yeah I  mean like you know we're getting closer for sure.    One other change it just made is when I click on  starter you see it goes payment question mark plan   equals starter. So I'm actually on starter but if  I go pro it actually opens up this page to pro.    So these links do something now which is kind of  cool, right? I can actually click get started and   then go to a specific payment page. I'm unsure  if this is because I'm logged in or logged out   though. I'm going to click sign out. Then I'll  go back here and then see what happens. Okay,   so login question mark plan equals pro. That  means it's actually going to keep and conserve   this query parameter as I browse through the  rest of the website, which is pretty neat. Okay,   now the redirection script has changed. It's  pretty clean. The way that this always works is   you can just put in whatever um numbers you want  so long as your card details are 4242 repeating.    So I'm just going to click pay. Please do not save  this card because it doesn't work or exist. And   it looks like after the payment, we're being sent  back to the main page. So, I'm just going to say,   "Hey, it looks like the Stripe Checkout payment  um went through, but then it redirected me to the   slash payment route. " Uh, if I go to dashboard, it  continuously pushes me back to that route despite   the fact that I've already made the payment. So,  we just need to find a way to validate that the   user's actually done the payment. That seems to  be the main block right now. Okay, it's telling   me that it's finished this, which is cool with new  secure endpoints and session IDs and stuff like   that. Okay, I'm just going to try a new account  here and see if maybe there's a problem with   that. Maybe it just has to do with the fact that  I had an old account and it's redirecting me based   off some old flag. Then I'll click processing  there. That payment looks good. No, it must be   a more broad issue. So, check out Stripe here.   It looks like we are receiving the payments. So,   that's going through. Um, for whatever reason,  we're not actually capable of connecting that back   to a person. This is my fake card, nick@niki. com.   I've made tons of payments. Uh, I'm just going to   relay this information over to my agent. If agents  have a hard time dealing with stuff like this,   it's best just to give them as much context as  humanly possible so they don't get stuck on one   loop over and over again. Okay, looks  like I've finally made it into the dashboard. So,   we finally solved that persistent error um to do  with payments. As I'm sure you guys can imagine,   you know, adding payments is like adding  another whole u problem that you have to solve,   which is why I wanted to push it off as long as  possible. But, uh, now that we have I'm seeing   that the credit monitoring is good, settings  look good. But I'm going to try uploading   faces. See if we could um diagnose any issues  there. The saving configuration button looks   like it works if I refresh this now. Okay.   No. So, it's telling Oh, okay. Cool, cool,   cool. I got worried there for a second, but I  guess we had a bit of a lag. Um, that's okay.    Okay. Going to take a peek at an example. Why  don't we just go to thumbnail generated? Oh,   no. That's uh that's me from before. Let's do this  one here. And then um it doesn't look like we're   saving the prompt variants. That's one change. I'm  also noticing this is significantly laggier than   it was before. Uh make the main subject highly  cinematic. Replace the face with the face of   the supplied face of the reference image. Use  dramatic cinematic lighting on the face. Okay,   let me try saving this configuration. Just seeing  if maybe it's an error or if maybe I didn't fully   understand what this is doing. If I refresh this  now, do we have that default prompt down below or   does that need to be dealt with as well? And why  is it so laggy? It may just be my computer. I am   editing a bunch of videos. So, okay, that doesn't  look like that filled in, which is unfortunate.    Um, why don't we do supplied here? Generate new  variants. Okay. Make sure the generation prompt   auto prefills with the default prompt in settings.   Right now it isn't. It should pull directly from   the default prompt instructions. It's also  a little laggy. The app takes significantly   longer to load now than it used to. Diagnose  whether this is because of some persistent error   behind the scenes or some issue with prefilling  or something else. Okay, taking a peek at this.    It did give me a very sexy beard. Let's be real.   Nick definitely can't grow that level of facial   hair. But now like the internet will be able to  tell the difference. Cue that one up. Thank you   very much. After the save, it's going to pop up  this little thumbnail saved. Um let's download the   download the image and just see how that looks.   See if there are any problems there at all. Nope.    That looks like definitely fake Universe Nick,  which is what we wanted. I'll go back to generate   another. Now I can do more. Okay. And it looks  like this is taking some time to load. I mean,   it's saying zero. Okay. Now it's saying 97. I  think I know the problem. I think in order to   fix whatever payment BS that it had to do, it's  now fetching data from the database on every page   load, which is adding a fair amount of latency and  then causing the app to lag a lot more. So, it's   obviously not what we want, but it's what's going  on. That's why every time I load settings, it   takes a second before this comes in. Ideally, what  you want to happen in a full stack app like this,   at least a modern full stack app, is when you sign  in, you want it to automatically cache and then   like pull all the data and then cache it.   Um, and then that way everything is pre-filled,   all the images are prefilled, the credit amounts  prefilled, so on and so forth. And then instead,   what you want is you basically only ever want that  to change if you materially change the database.    So when you change a database, then it says,  hey, you know, you should probably grab the new   data as well, just uh just to be 100% sure. And in  Nex, they manage this through a variety of means,   but a big one is like mutating the database um  or setting like mutations or whatever as   opposed to always fetching totally new data. So,  I think that's what's going on. I'm just going   to instruct the agent, see if we could fix that,  and then assuming that there's no other changes,   I'm just going to push this puppy live. Okay,  looks like it's loading significantly faster now,   which is nice. We can jump around from settings  to generate to overview, and we don't have that   like really persistent lag like we had before.   Um, we also have the ability to, you know,   delete if we wanted to. I think what I'm going  to do is I'm just going to open this in, well,   not an incognito window. I guess I'll just open  it in a new tab. And then what I want to do,   whoa, I don't know what the hell just happened  here. No, thank you. Let's not do that. Thank   you. Thank you. Um, I think what I'm going to do  is I'm just going to try the mobile features now   on the dashboard because mobile optimization is  pretty big, right? Just want to make sure this is   going to work. And it looks like it is. We have um  we have a little nav bar down at the bottom now,   which is kind of cool. And we can jump back and  forth between these three. So, that's nice. I am   a fan. Thank you. And now, let's just exit out  of the dashboard, go back to the landing page,   and just see what we're looking at. So, looks  like that mobile optimization prompt worked in   so far that, you know, the um little section here  is mobile optimized. And then all this stuff's   mobile optimized. I'm just going to pretend sign  in now. Okay. And then yeah, we immediately   jump to dashboard where we have functionality.   Let me just try deleting this. Yeah, I want to   delete it. And then if I just refresh this puppy,  is it gone? No, it's not gone. So that's the final   change we need to make. And then uh yeah, I'm  pushing this puppy live. In addition, I've also   set this up. So it's now at thumbly-g. netfi. app.   I just said, "Hey, put this puppy on GitHub and   Netlefi. Let's do this thing. " And uh yeah, this  is actually working really, really good. So,   I'm just going to go over to sign up here and I'm  going to go nicholas@gmail. com. Would be a hell of   a name if I could pull that up, though. And then  we'll go proceed to checkout and I'm just going to   enter some info. Apparently, my card holder name  is 234234. Take that, Nicholas. This has jumped   us directly over to dashboard and now I have the  ability to do everything. So, I'm going to upload   some face. Uh, what was it again? Was it supplied?   Yes, it was. Keep the identical to the inspiration   image. Replace the face. to face the reference  image. Use dramatic cinematic lighting on the   face. Cool. I'm just going to save this. Says  that it saves successfully. Oh, hold on a second.    That's not my face. That's my face. Good god,  Nick. You know, you've been developing an app for   a long time when you start making trivial errors  like that, huh? Okay, now I'm going to generate   three variants. Um, we're going to see how  long this takes. So, counting down. 1 2 3 4 22.    Okay, so right at 22, we had an unexpected error  occurred. So I imagine this probably actually went   all the way through. There was just some problem  with updating the DB. Uh this occurs as mentioned   when you go from local to some sort of like  cloud setup or you know actually like hosting   it live. So I'm going to go through and just give  this an unexpected error occurred. Do a little bit   more final debugging and see what we need to do  to make this puppy. I would imagine the issue is   probably related to the fact that um when we were  running this locally, we didn't have a timeout,   but services that like manage the calls  for you, like uh Netlefi, for instance,   typically have timeouts of like 15 seconds or so,  maybe 20 seconds. So, I think we probably just   ran into that. Okay, just ran out of usage again  after developing this for a good hour or so. So,   I've moved over to Claude Code. Uh I'm still going  to try pushing and generating the variants here.    We're going to see how that goes. 22 Mississippi,  23 Mississippi, 24 Mississippi, 25 Mississippi, 26   Mississippi. Okay, so right at 26 seconds is when  we got the result. Um, I imagine that's probably   why this one's kind of weird. I think that's the  first one that's like actually objectively failed.    Uh, but yeah, no, I like this one. So, why don't  we just keep selected thumbnail? Awesome. Looks   clean as per usual. And uh, yeah, I mean like  we'll just click generate another and we can just   keep on going as many times as need be. But that's  it. We just launched our app and it works. And

### [4:48:19](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=17299s) App Launch and Security Check

there's one final thing we need to do, which is  that god darn security audit. Almost forgot. So,   let's do that. Okay, pasting this directly into  cloud code. As we can see here, now reading all   the client pages and doing the config. And let's  see how we do. And it's just building to verify   that everything compiles now. And then I'm going  to do a final check just make sure that, you know,   the app functionality works the way I want it to.   You'll quickly realize that the vast majority of   time that you spend on this is not actually the  building. It is just the giving of vibes plus the   verifying it works to the way your vibes require  it working. So I made a bunch of these changes. Um   okay, there's some rate limiting off middleware.   Okay, so I'm just going to say implement the   middleware with check stripe web hook secret etc.   So I'll probably have to go and grab some stripe   stuff, but I'm just going to go and verify that  this actually works now. Awesome. We still have   the ability to do everything that we had before,  which is nice. Okay, I'm taking a look at this   is so interesting. Like if you really zoom into  one of these things, you see every little pixel   that this constructed. It's wild. Um anyway, I  mean like that dead inside completely. But yeah,   uh we're now going to run a with check migration  on the database. So that's going to be cool. And   then we'll also add some web hook secrets. So I'm  going to head over there and then just verify that   um I got all this. Okay. Well, that one took a  little bit longer than I wanted it to because   we did have a bunch of back and forth with  the payments on Stripe, but suffice to say,   still good to go. Uh this is a good example now of  everything. It's not only, you know, kind of CRUD   create, read, update, delete, like a traditional  app. Doesn't just do stuff that you ask it to. We   also, um, are wrapping around a pretty popular  and powerful API, the Nano Banana API. And then   we're applying some prompts and then some sort of  creative applications here to generate really cool   outputs. Uh, and then we're wrapping it all in a  really nice UX and connecting it to payments. So,   at this point, like you guys basically have  everything that you need in order to just build   whatever full stack app you want. Uh, I think  what I'm going to do next is just do one final app   combining everything that we talked about. Maybe  make the UX a little bit more complicated. So,   instead of just having three or four, you know,  two or three things on the left hand side, we have   like what might uh be considered more of like, you  know, like a really successful enterprise app. And   then I'm just going to run through the motions  that I've already showed you guys multiple times   at this point before talking a little bit about  the economics of vibe coding and then wrapping up.    Man, I am so excited for this app because as  somebody that produces a tremendous amount of   content nowadays, having an app that can basically  allow you to focus on one uh place, let's say   YouTube or maybe your blog or something and then  have that same content, the same concepts and   ideas immediately distributed to a bunch of other  platforms is fantastic. My issue with the way that   most people do this is they just do it in a really  poor way. And so, you know, the end uh output   quality of, let's say, a blog post converted to  like Xthread snippets or whatever ends up being   so bad that, you know, the AI slop um overruns it  and then the quality is really poor. So, my idea   today is I want to make an app that's so dang good  that, you know, you don't get that. And it's still   written in your tone of voice. It's written really  succinctly. It's written really intelligently.    And I was trying to come up with like a good  name for this app just before, you know, like   clearly if you guys have paid attention so far,  the names so far have been afterthoughts, right?    But um this time I think I already got one. It's  going to be called splinter. And the idea is okay,   you're going to put in one piece of content which  why don't we just call this like pillar content.    This is going to be like the pillar upon which  everything else rests. And maybe it'll just be I   don't know like a blog post or something or maybe  like a video URL, right? And then what I want is   I want this to be able to create content for a  platform like X. I wanted to be able to create   content for a platform like LinkedIn. I wanted to  create content for Instagram. I wanted to create,   I don't know, scripts, maybe like long form  scripts. And then I also want short form scripts,   right? So we could do stuff. And then like  eventually, and I'm not going to get to this now,   I don't think, cuz it's kind of a big ask, but um  we should also be able to create like video like   full stack end video. Um that would be my that  would be my end goal. So, this is basically what   I want the app to do. I want you to be able to  provide one piece of content and then immediately   just like, you know, creates high-quality content  that's specific to each platform. And obviously,   we're going to need to do this through some  sort of dashboard. In addition, okay, I don't   just want this to be basic where we had like our  little dashboard on the left hand side with like,   you know, three things and then we have some other  like central section um over here. I want this to   be more interactive and I want this to have some  sort of like really detailed onboarding as well.    Um, this is naturally going to involve like a  fair amount if you think about it. Not only are we   going to have to do everything we did in the last  app, which was to uh summarize a landing page,   Stripe payment integrations, um, OD DB, some sort  of API wrapping, and then like a good way to,   you know, present that to the user. We're going  to have to go further because it's now not just   one like API that we're wrapping around, but  it's realistically going to be multiple. And   then we're also going to use our own custom logic  sort of um on-site logic to well not on-site sorry   but like our own proprietary stuff to do things  like manage the tone of voice the prompts and so   on and so forth. And perhaps one of the coolest  parts of this is I think the last app used AI as   just like an afterthought to help generate  you know a list of filters in this AI is going to   be like the main deal and uh hopefully we all  know like AI is the big thing right now. So,   it allows us to sell both uh AI and our value  props, but also AI through the apps. And my my   goal when building apps is I just want to  build stuff that like I actually would use   uh if I wouldn't actually use it as somebody in  a space. Odds are I probably don't understand the   problem enough to even be building this app in  the first place. But yeah, you know, if I could   save myself a bunch of time with this, that's  going to be a solid win. And then if I could   save other people time of that and stuff like  this as well, then that'd be even better. Okay,   so the very first thing I'm going to do is I keep  turning back to this 16 or 17-year-old kid. No,   he's 16 years old. His name's Leon. And what he's  been doing recently is he's been building like   really cracked high-quality landing page designs  for Gemini. And so he comes up with these very   very in-depth prompts. And then he ends up with  like a literal interactive app that you can like   move your fingers around. Unfortunately, you  didn't take a video of this, but this is like,   you know, an app that there's like little strings  that are basically here being um processed every   second through I don't know if it's like web web  GUI or something like that, but it's some sort of   3D library. And um he shares his prompts online.   He's really cool. I used him in my last video.    I wish I had half that uh brain at 16 years old.   And so what I'm doing just to start us off is I'm   going to copy this prompt that he's put together.   Okay? And then I'm just going to ask Gemini to   make me a landing page. And I just want it to  make me a landing page first before I do the rest   of the app because I just don't trust that it'll  be able to do both the very in-depth programming   required to build some sort of cool 3D generative  thing and then also do the app. So basically what   I'm going to do is I'm going to have it like  generate the landing page and then we'll   build the rest of the app out afterwards. Um, so  you know, kind of non-traditional, but basically   what I've done here is I've just pasted all this  stuff in. Okay, I'm going to press enter. And I'm   not going to read this whole prompt to you, but  this is basically, you know, act as an elite,   award-winning creative developer and digital  generative artist. Your task to write a single   self-contained executable file that renders an  ultradetailed pixel perfect and breathtaking hero   section for a next generation tech company.   Critical constraints, do all this fun stuff.    Here's the theme and the content. You know,  provide some information about what I want and   stuff. And stylistically once we have this set up  um you know I'll make some minor modifications to   it so it's not a one to one clone or rip of this  uh and then we can actually move on with the app.    Now while I'm doing that just to save on time I'm  going to voice dump everything that I think this   app is going to include. Um and then I'm going to  send it over to claude code so that I can have two   of these instances operating simultaneously.   One that's probably a little bit better at   architecture design than the other that you know  is better at the front-end design that I'm asking   for. So, uh, I'm not going to repeat it all over  to you guys, but a I want to design an application

### [4:56:12](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=17772s) Ideating New Vibe Coded App Concept: Splinter

that takes a single piece of pillar content and  then immediately rewrites it, regenerates it,   and recreates it, and then syndicates it across a  variety of platforms. Okay? And I just gave that   over to Claude Code, and I asked it for a spec,  which is basically a highlevel description or   overview of what this app would look like. And I  just want to run you guys through this here while   Gemini is designing the actual generative part.   So this includes tech stack um app architecture   some info on the database schema some info  about the landing page and marketing site.    So after we're done with this, we'll use this  to modify it. Pricing and Stripe integration,   authentication and signup flow, onboarding  flow, the actual content syndication engine,   uh info about the dashboard, the content library,  AI configuration and voice model, scheduling and   calendar, analytics and reporting, settings and  account management, API and webbook architecture,   and then also some direct platform publishing  and then AI video generation stuff in the future,   which basically we're just going to like add stubs  or little nuggets that we could use to build that   out later if necessary. I've then given it some  information on the text stack and then asked it to   come up with some other things. So for instance,  we're going to use Next. js15. We'll use Tailwind   CSS plus the Shad CN/ UI component library. We'll  have Superbase Realtime for live updates. We'll   we'll do a bunch of other stuff as well. ZOD  validation. This is important for security cuz   I asked it to make sure that it was as secure as  possible on the first shot. What I'm going to do   is I'm just going to modify a couple of the pages  here. I'm probably not going to use a calendar.    Okay. Analytics look good. Um platform connections  for now. I'm just going to leave those out.    Um, AI voice prompt configuration is good. So,  I like this. This is like your tone of voice.    Just make sure that gets that in right. And then  settings, account, billing, and team. All that   stuff looks good. Here's like the data objects.   I don't want to spend too much time on that,   so I'm not going to worry about it. Um, that  looks solid. On the right hand side, it looks like   this generative component has now been done. So,  that's pretty sexy. Now, it's going to go design   the rest of the website. While we're looking  here on the lefth hand side from cloud codes,   uh we have a bunch of different feature sections.   The landing page pricing and stripe integration   is going to start at 19 a month or 190 a year. So  it's going to be 10 months basically giving two   free months to people. Of note, just before we do  this, the input method is really clean. Um I asked   it to be able to either paste raw content. So just  copy and paste a blog post, article, a transcript,   or a series of notes, or paste a URL. And the  whole idea is, you know, if we paste a URL,   um it's going to go through and then scrape the  whole website for us. So we didn't even have to   touch any of that. Um, additionally, I want to  be able to do things like paste a YouTube video,   although I think right now I'm probably going  to leave that out just uh as the demo. And then   once I have those core functions and features  in, then I'm going to do more. But you should   also be able to upload things like MP3s, waves,  M4As, OGs. Um, all these things should be auto   transcribed. And the idea is it's just going to  be like your one-stop shop portal for like, hey,   I just produced a piece of content. I'm going to  plug this in and then I'm going to have copy and   pasteable ready content to distribute to all these  different platforms with minor adjustments. And   obviously, I'll also be able to like change the  prompt anytime I want. Um, so very valuable for   me. Hopefully it'll be as valuable uh for other  people as well. Okay, very satisfied with the   first iteration of this landing page. As you see  here, there are some issues with this WebGL stuff,   but these are real particles that are being  rendered um in real time. Um I don't like how this   neurallex stuff is all over the place. Obviously,  that's okay. I've since told it to slow   things down a little bit, but yeah, I mean like  the text on the left hand side of the page looks   really clean. Obviously, we have like nice  little mouseover buttons and stuff like that.    Um, I'm going to change all of this signap  stuff to uh Splinter, but for now, I mean,   Gemini uh 3. 1 and you know, prompts from Mr. Leon  Lynn over here are absolutely crushing it. So,   pretty stoked and looking forward where and  looking forward to where the next uh step   goes. After the next round of edits, we've also  added some additional sections. Common questions,   ready to syndicate, and then finally down here,  um, a full- length footer. So, that's looking   pretty sexy. The lines here are still moving  around a fair amount. So, I'm just going to modify   them a little bit more. But, we've now implemented  some sort of like mouse um interactivity. Do you   see how this thing is kind of like moving away  from my mouse as I move around the screen? So,   I can technically control this. It's just  it's not super uh what's the term? Trivial   or obvious to me as a user of the app how this  works. I've also had it change these lines. So,   that's going to slow down pretty significantly.   And then we can see what the final product looks   like. While I was waiting, I also had it go do  a little bit of research on other platforms. So,   Repurpose. io lately, Constant Studio, Buffer,  and so on and so forth. And then why Splinter   will solve it. So most are distribution only or  creation only. Splinter will do both. Basically,   it'll allow you to both create content and then  distribute it quickly. Um voice and tone being   an afterthought here. We're going to fix that  via um some pretty strong prompt engineering. I   think most people that are designing these sorts  of repurposing apps are more software engineers   than they are prompt engineers. I would consider  myself much more prompt engineer than a software   engineer. So that should allow us to get like  very high quality tone. Okay, these particles   are looking a lot better. They now move according  to my mouse, which is cool. And then these little   um things are no longer facing the opposite  direction. I'd say they're probably a little   too many of them. So, I think I'm going to remove  the entanglement ratio here just so we have three.    And then I'll probably also just adjust the color  of the particles a bit. So, you know, it's I don't   know, like kind of lightish yellow, maybe goldish,  something like that. Also see if maybe I can make   the particles just a little bit bigger. Right  now, I feel like they're kind of compressed,   which I'm not a fan of. still is kind of neat just  seeing this little streaming animation. Pretty   interesting seeing the logic and kind of the math  that uh ended up aggregating all these things   together. I mean, I'm just moving my mouse around  and there's clearly a deep relationship here,   but I can't exactly figure it out. I think that's  because they're modeling this in 3D instead of 2D.    Becomes a lot simpler when you see them in black  like this. There's definitely some 3D going on   here as we could see. And honestly, I think I like  the black. Um I like the 3D translation. So, I'm   just going to keep it at that. All right, awesome.   So, now that we're done with this, um, now I'm   just going to modify the content on this page. And  I'm just going to do it by giving Gemini the rest   of the instructions and saying go for it. Um, you  know, we're going to want to clean out some of the   contacts and stuff. Uh, but I'll show you guys  what that looks like. So, I'm going to say to   adjust the copy on the page to match the purpose  of the app, which you can find in this side of   this spec. I'm not actually going to like manually  do any of this. And then it'll go through and then   just adjust the rest of it. And yeah, I didn't  actually realize, but this is definitely   like a portal that we are moving through in 3D  space. So, it's actually more complex than I   thought it was. Looks clean to me. We now have  everything here set up. All of the syndication   text is in now. Um, it's still saying synapse,  which is kind of annoying. I don't think it got to   that. Cool. Good to go. So, let's build the rest  of the app now. Um, for us, it's going to be as   simple as just sending all of this information  over to Gemini and saying, "Excellent work.    I'd now like you to build the rest of the app  as detailed in splinter_spec. md. But there's one   change. I'm going to say along the way document  each update in an updates. md file so that we have   a history of tracked changes in case something  occurs or I need to feed this into another version   of the model of Gemini. And the reason I'm doing  this is because this is a pretty crazy long app,   right? There's a fair amount that's going on here.   Um, I anticipate I'm probably going to run out of   tokens at some point because I ran out of tokens  about an hour and a half into the development of   most apps so far. What I want is I basically just  want like a list of everything that it has done   up until the time that it did not do the thing.   Um, and I'm just going to store it in a file that   I can then give to either another version of  Gemini later on or clawed Opus 4. 6 or whatever   the freaking model I want. And in this way, this  is almost like a GitHub um repo before I get all   the pushing logic and stuff in. But it gets to  take advantage of AI summarization features. So   I'm not going to have to load the codebase every  single time. I want to like analyze and you know   see what the problem is. This section cracked me  up a ton because I don't know if you guys have   uh seen the draw the rest of the owl meme, but  basically it's like how to draw an owl. Draw some   circles. Draw the rest of the freaking owl. Um  I feel like we've just done this so far and it's   doing that. So, thank goodness for AI, huh? This  initial implementation plan is going to be heavily   modified since we're no longer just building  a one kind of uh file uh website. Instead,   we're going to be distributing some of the stuff  across big file structure. Here you can see that   it's also set at the updates. m MD, which is quite  nice. So, we're going to see technical decisions,   feature implementations, and significant changes  applied to the Splinter project. And my hope is by   doing it this way and then later on feeding this  to um you know claude I can have both of these   models both claude code uh sorry claude opus 4. 6  and then gemini 3. 1 pro high basically like debate   about which features are better which things  to keep and then which things to remove. Agent   teams in cloud code does a variation of this right  now where basically they have like a shared chat   file and then they chat back and forth. Um, this  updates to me is just a slightly more streamlined   version of doing that without me having to  waste $400 in tokens cuz boy does that agent   teams feature consume a lot of them. All right,  so it's built the MVP implementation plan. Just   taking a quick peek through this. This is going  to need everything here, which is fine. Hopefully,   we are very used to getting all those API keys  now. And yeah, we're going to initialize Nex. js   directly inside of this root directory. So,  it's going to do all of these steps here. Oh,   hold on. I see that it's not actually taking that  into account. I'll say initialize in the same um   folder as root hero. html will be our landing page.   Just want to make sure that's super clear. And in   this way I get to pause the outputs. I'm not going  to waste a bunch of usage on you know building it   out and so on and so forth. That's where taking  a peek especially initially at what um Gemini is   doing can be pretty valuable. I always liken this  to sort of like a trajectory sort of thing. Let's   say over here is um I don't know South America,  okay, on the left hand side and then over here   is the westmost coast of Africa and hypothetically  you are a boat trying to make it from one side to   the other. And so this is you, right? And then  your goal is you want to go over here. Well,   logically speaking as you are leaving the port on  the eastmost side of South America. Okay. Um there   are a lot of different directions you could go.   You go this way, you go that way, you go this way.    only a very small subset of these directions will  actually get you to your goal. Obviously, you're   going to need to go like here, right? And even  then, I'm a little bit off. And so, initially,   I guess what I'm trying to say is the direction  that you pick even in like the first kilometer   as a boat heading to to sail is really really  important for determining the final placement of   the app. Um, even if I was like one tiny little  degree off, that could be the difference between   me making it directly on target and then I don't  know like a one degree difference or something   could be the difference between me making it to  city that's like 100 km away. And so I usually   like to be around here to steer the model and  then once it's sort of like in this territory   or whatever, you know, if it's like on track well  enough that I think it's like going to be okay,   then I don't really worry too much about that. Now  on the right hand side here you see that the error   um the agent actually ran into an error. This is  another reason why I like being around. This can   occur for a number of reasons. This could occur  for token issues. It could occur because I don't   know like the API is just out. It could occur for  rate limiting reasons or just because sometimes   um some of these packages don't actually interact  nicely with Gemini and then it kind of struggles   with the terminal. But yeah, I'm just going  to be around for the first couple minutes for   a build that this is this comprehensive because  I don't want it to like make a wrong assumption   and then build something completely different to  what I want and then later on I'm just going to   have to go back and redo it all anyway. Okay,  you got the app right over here. So, it's looking   pretty sexy. If I click get started, we now can  sign in or sign up. So, I'm just going to pretend   that I've done all of that. Now, we have the  onboarding. So, initialize workspace. Cool. So,   this is like all the platforms that I'd want to  connect to. It's good. This is really interesting.    Formality index, humor coefficient. I like that,  but I think we're going to have to add some to it.    So, I'm just going to go back to the model and  then I'll say change voice profile to a default   um to an advanced setting advanced let's  say button where I can modify the prompt directly.    That looks pretty cool. Dry run simulation.   Hey, what's going on? Execute run. This is   going to be like when it actually does its  thing. Cool. Also add a um an additional   step right after the dry run that shows the  output. I'll wire you up to Claude Opus 4. 6. So we can test this next. Okay, we're now going  to enter the dashboard. Okay, so this looks like   a pretty simple dashboard still. I do like  the style we have. We're going to build out,   you know, a generative interface. It says  over here. I'm probably going to want to   move this stuff a little bit over to the left.   I'm not seeing anything under generative engine,   voice profiles, platforms, or settings. So I  guess right now we have the onboarding all the   way up to the dashboard. So that's pretty cool.   Still, if I click log out, I go back here. Then   if I go back here then uh Okay, cool. So yeah, I  think I'm understanding where we're at with this.    Uh it's looking pretty clean and I'm glad that I  managed to do all that stuff with just a little   bit of prompting. We still have that cool little  3D thing, too, which is really nice. Okay, so next   up, I'm going to feed in these instructions and  then I think what I'm going to do is I'm going   to have it continue the initialization.   Um this is going to be tough. I mean,   I really like this. I really, really like this,  right? But this is going to be pretty tough. Uh,   I guess we could probably autogenerate a  prompt that includes some settings with this for the sliders. We'll use this in a prompt  to fill variables like formality and humor. And then this dry run simulation. We'll  execute the input. We should get a new   one here. Systems nominals.   Cool. Awesome. Okay, cool.    Let's also start building out the dashboard.   I'd like you to replicate the attached image   in terms of content. Now, I'm going to go to  dribble over here. dashboard and let's see what we can do here. I want  something that's just like much higherend,   cleaner. I do like the squareer look. Um, to me  that just implies like a high-end brand. So, I'm   going to look for something that does have that  square look. Let's try filtering by new instead of   um popular. That way, maybe we can get things  that other people haven't built before. Okay,   this looks pretty clean. I like this.   Let's see if we could feed this in. Oh,   sorry. We need to copy this.   We can't just do that. Okay.    uh in terms of content and style except I  want you to stick to our pre-established um square no border radius. That's the little  um smooth corners. I don't really like that.    I also want you to add significantly more  functionality as per the initial doc initial   splinter spec. md. And this is looking pretty  clean. There's an advanced settings feature   here now where we can actually change things which  is quite nice. I'll pretend I'm executing a run   running style transfer. Okay, great. Awesome. So,  this looks kind of silly. Not a fan of the design   for sure, but um you know, it's cool that it has  a lot of the stuff laid out. Interesting. Yeah,   this is like highly opinionated stuff clearly. Um  all right, so I think what we're probably going to   want to do is on the left hand side, we're still  going to want to have like a database,   sorry, database dashboard panel. Um we're not  going to want to mention the model. I do like   the system log. That part's cool. All right, cool.   Let me just give this some stream of consciousness   feedback. Hey, this looks cool, but it's quite  opinionated. I don't like the dark borders. I'd   like a higherend sort of Lux design internally  that still sticks to um very similar to the design   on the landing page. I'd like you to remove all  mentions of the specific models that we're using.    I want some sort of lefth hand side pane that I  could use to select different views. I really,   really like the system log. I like the  credit usage, the generation, source items,   active platforms. These are fine. replace recent  archives with a graph. That graph should go really   in-depth on the number of generations and which  platforms we've connected and stuff like that.    We also need the rest of the app. So, I need a way  to see specific and individual generations. I also   need a way to create a new syndication. Right now,  when I create when I click create new syndication,   it takes me back to the wizard. But I want this  to take me to a page where I can insert content   either using URL or MP3 file upload or video  upload or paste in a bunch of text and then it'll   do the syndication for me. Remember, we're just  dry running all this stuff for now. Uh I'm going   to include some API credentials for anthropic in  a second. So you could hook up the cloud opus 4. 6   six integration and change the rest of the  language on the actual app side to reflect   like normal app usage. For instance, I don't like  the term disconnect. I don't like the matrix. Um   I don't like, you know, some of the other  language that you're using here. It seems a   little too tryhardy. Okay, after about 40 minutes  of development, we did run out of tokens. But   never fear, that's one of the reasons why we're  using two models and not just one. So what I've   done is I've exported our conversation history  and then that updates file. And now I'm just   uh doing next steps which in my case involves  feeding in the enthropic API key. So I'm going to   go and find the anthropic API key here. I'm going  to call this uh for splinter. Then I'm going to   copy it over right there. Okay. And then what I'm  going to do is I'll say let's wire up Claude Opus   4. 6. Test a bunch of prompts. Give me a few uh a  few dry run examples. And then I'll pick the ones   I like the most. Let's say test 10 prompts.   Give me a few dryr run examples of befores,   afters, and I'll pick the ones I like most  and we can integrate them. In general,   the design quality of Opus 4. 6 will be a little  bit lower. So, just keep that in mind. However,   um there are some other trade-offs. You know,  it's a little bit faster and then addition to   being faster, I think architecturally, it tends  to make like a better functioning application. So,   that's why I frontloaded the design with Gemini.   And then after the design and stuff like that was   all wired up, I did all like the little scripting  or I'm doing all of the little scripting and   backend passes with um you know cloud opus 4. 6.   This database is now set up. So I can head over   to let's do two things. Under authentication I  just want to go to sign in signin providers and   then I'll remove that little confirm email step  and then under project settings I'm going to go   to API keys just so that this has all of the keys  that it needs in order to you know do whatever it   wants. So I already gave it the publishable key.   We'll go um superbase secret API key and then I'll   paste that in as well. And the idea is now it has  everything that it needs in order to manage the   Superbase instance for me. I don't really need to  be involved in this process at all. And I'm doing   this while Claude is basically just running  a quick little test on the prompts. I'm just   going to pick the best prompt for now and then  I'll worry about like optimizing the hell out of   it later. Okay. And whereas anti-gravity was using  its own built-in browser, uh Claude Code typically   uses Chrome DevTools. So that's what it's doing  right now. jumping on taking a screenshot and then   it's seeing an internal server error. So whatever  it did either didn't compile or there was just   some problem on the back end. Um so that's what  it's fixing up now. As you can see the syndication   page here for create is much lower quality. Um  and as mentioned you know cloud is just nowhere   near as good as Gemini at least as of the time of  this recording and designing those really high-end   uh looks unless it's like per perfectly basically  trying to duplicate functionality which is   unfortunate. Um, it is going to make some minor  changes here because it can't actually click   this generate button. So, it's cool that it  can kind of run that testing loop on its own,   but all of this is just in contrast with Gemini's  high quality design. And it looks like it created   a LinkedIn post and then also an X and Twitter  post. Just taking a peek here. It took us 3 years   to hit 1 mill AR with our SAS product. Here's what  actually moved the needle and what didn't. So,   this is a um phrase that I explicitly said that  I didn't want in the prompt. So, obviously,   I'm going to have to do some adjustment there. We  sell to dental practices only dental practices.    The temptation to go horizontal was constant,  but saying narrow am meant we could out build and   outmarket anyone in the space. We charge more than  felt comfortable from day one. Honestly, the price   anxiety never fully goes away, but underpricing  would have killed us. Okay, just while we have   this, I'm going to go back to the actual page.   Make sure that nothing else was changed here.    Cool. So, the design here is quite nice, right?   Hopefully, we can see that. The question   is where do we go from here? Get started. Sign up.   What's the wizard looking like? Okay. And   then we're going to have our prompt here. Try run  simulation. Sure. Oh, is this now actually using   real cloud code? No, it's not. Okay, cool. Uh,  sorry. Um, Opus 4. 6. We'll sign off. Enter the   dashboard. So, the dashboard here is looking a lot  simpler. Um, you know, we we're missing a fair few   of those cool design features that we had before.   And then we also have little rounded corners which   I don't like. So, I'm just going to dump a bunch  of instruction into Claude and see if it can solve   this. Hey, I want the design of the dashboard to  reflect landing page. Right now,   there's a very big discord between the two.   Notably, the corners are rounded in the dashboard   and not rounded everywhere else. There's also  color discords. We're using this soft purple,   which uh is correlated with which is typically  associated rather with LLMs. I don't want pill   style things anywhere here. And in general, I want  you to use the same fonts in the landing page for   the new syndication or create page. I like how  we've laid this out so far with the URL, file,   or paste text, but rather than have three buttons  that the user has to click, I just want them to be   able to do it um do all of these simultaneously.   So, just have one field inside of that field   allow users to either paste text, import a URL, or  upload the file. It'll eliminate some complexity,   keep things really streamlined and simple. also  allow them to select which platforms they'd like   to syndicate content to at the bottom. Right now,  the generating for button, generating for section   rather, doesn't allow us to um make any of those  changes. Finally, make sure that the app looks   similar to the landing page. As mentioned, it's  very important that we get this one right. Oh,   this is much better. Okay, as we see here, we  now have that perfect design unification. I   like the new syndication button up top. Um content  library, votes, profiles, analytics, config, and   API access don't fully work yet, but this looks a  lot cleaner. So, we paste a URL. or drop a file or   type our content here. If I go into my finder, if  finder and drop it, does that work?    Oh my goodness, it does. That's really clean.   Likewise, if I paste a URL, so I don't know.    Let's do this one here. Okay, for my big claw code  course earlier and paste that in. Does that work?    URL detected. Really clean. Okay, we also have  blog x, Twitter. Okay. Okay, this is much much   nicer. Thank goodness. Um, obviously this is  going to be difficult to see the differences   between these lines. So, looks fantastic. Let's  add mild differences between the lines on the   generation throughput graph. I also want to build  out pages for content library, voice profiles,   analytics, setup, and API access. So, work all of  those out. Add uh whatever relevant features make   sense. And if there are any additional features  that you think would make sense on the lefth hand   side panel, please add them. I'm uh attempting to  increase the at least perceived sophistication of   the app right now. Okay, I actually just stepped  away to grab myself some breakfast and came back   and it looks like Claude is still monkeying away  at this. It's been probably 30 or so minutes.    I've had very little actual hands-on involvement  and uh yeah, you know, like the agentic workflow   time horizon of this specific model tends to be  quite large. Um, I'll say Gemini actually has   a slightly longer one, but when you prompt  it right, where essentially you say, "Hey,   here's a big road map of things. Here are a bunch  of changes that we've already made. Here's the   uh whole spec of the thing that we ultimately want  to build. " And then you just let it run loose. It   can operate quite independently for quite a  long time. Um, and so this has gone through I   think three or four context windows at this point  considering it's about 200,000 or so tokens. You   know, I've spent a few million tokens um using the  cloud or anthropic API. That's multiplied by fast   mode here. This sort of approach isn't the best  for everybody because of costs, but in my case,   I'm happy to trade off that cost for um time  as previously and will continue to do. Checking   back in on the app, it's looking significantly  more fleshed out. We have a content library up   in here with the actual posts themselves. We can  go grab these posts and do something we wanted   to. There are voice profiles now. Um there is a  brand voice, casual, blog. You can adjust that   using this little section down below. You can also  add writing samples for best results which will   improve the probability that an AI model actually  outputs what it is that you want. Generation   volume right over here along with tokens used,  average numbers per session, platform breakdown,   everything that I basically like talked about  in the spec. Finally, automation rules. So,   um this is like a workflow thing where you can  automatically syndicate new content. Basically,   every time you add new content, it'll  automatically go through a big flow. We have   like enabled and disabled and stuff like that.   Right now, these are all just stored on the local   database. um it's left to be seen essentially  whether or not I could scale that up. We have   profile platforms. This is where I can connect  and disconnect and so on and so forth. And ideally   this would open up a little like connection  panel. And then uh you know we have notifications   supposedly throughout email with the ability to  export all data. And this is really the section   that I'm the most excited about because uh you  know if you make your apps like agent compatible   via API um I think that's going to be a massive  market later on. So, what I've done is I've added   an API access section with like supposed  production keys and stuff. This isn't fully   fleshed out, uh, as I'm sure you can imagine, but  still pretty reasonable. Um, what I'd like to do   next is basically want to verify that all this  functionality works and actually like does   what it is that they imply that it does. And so  for this, I'm probably going to use a distributed   um cloud code either agent team or I'm just going  to ask it to run through one by one. The   idea would be, you know, spin up a se separate  instance to test the API key while you're spinning   up a separate instance to test the notifications  while you're spinning up a separate instance to   test the automation rules. We'll see how all  that stuff goes. Hey, this looks fantastic.    I don't think there's anything else here that I  really want on the app. Um, maybe on the dashboard   there is a little bit of white space at the bottom  because the system log is just a little too   long compared to the connected destinations.   I think we could probably fix that by adding   one additional row of connected destinations.   That'll um match everything up quite nicely.    Everything else looks really great. My next desire  is to test this end to end every specific feature.    Just going through a really simple setup here  for LinkedIn O because I want to verify that   this actually works. So, uh, we're going to add a  couple products to the app. So, share on LinkedIn,   we have to do this. So, request access. We also  need, um, sign in with LinkedIn using open ID   connect. So, I'm going to request access to that  as well. And the good news is, you know, you don't   actually have to know how to do this yourself.   This is just stuff that uh in this case Claude,   but Gemini as well can just walk you through.   Then under OOTH 2. 0 settings, we need to add this   redirect URL. So I'm going to go up to O. Just  going to grab the authorized redirect URLs. And   then I'm going to paste this in. And then I'm also  going to copy both the secret um into this ENV   file. And then I'm going to uh okay, added restart  dev server etc. And then when this is done,   I need to go to setup platforms. Connect LinkedIn.   Okay, cool. So, I'm now going to check out what's   going on over here. We'll mock. We go to setup  platforms and then connect LinkedIn. This is going   to open up a little LinkedIn dialogue. I'm then  going to sign in using my own credentials. Okay,   now I have a phone number that I have to verify.   So, I did just get this. I'll type that in. Now I'm going to sign in as myself. Cool. And it  looks like LinkedIn status is now connected. I'm   going to head back over here and say connected  just fine. So we should be fine with this. Um   find some way to store all of that info so we  don't need to reconnect next time. All right.    So, we just did this um you know with with  LinkedIn. So, I should be able to go to new   syndication now and then I don't know. Let me just  like find an actual post that I made before. Maybe   my blog. It's a good source for this stuff.   What's a fast one right over here? Actually, let's   test this functionality. We'll click generate. I  don't know if it's actually feeding in this. So,   that'll be the tough thing, the thing to double  check. We are on a generating tab. It's a fair   amount of content. So, you know, I'm not expecting  it to finish basically immediately. Oh, also we're   syndicating to LinkedIn supposedly. We should have  like a final check before we actually publish it.    Okay. Okay, cool. So, it's double checked to  basically see whether or not we're connected.    And so, X doesn't have publish, but LinkedIn does.   Most business small business owners are terrible   at hiring. Honestly, it's not because they're bad  at business because nobody teaches you how to do   it properly. Biggest mistake, hiring based on gut  feeling instead of actual data. You meet someone,   they seem sharp. Cool, cool. All right. Uh,  we still have some issues here. So like I don't   know hashtags. Nobody uses hashtags anymore,  buddy. Remove that. Explicitly add it to the   prompt. Uh we should never generate any sort of  hashtags. Also, I'd recommend against emojis in   general. And then let me see what are we doing  that is sort of unfortunate. Most small business   owners are terrible at hiring. And honestly, it's  not because they're bad, but it's the biggest   mistake. Okay, so we have to avoid um LLM isms.   Like essentially the main LLM writing pattern   that pushes it into uncanny valley territory is  when you jump between extremely short sentence   lengths and then long sentence lengths and then  do that over and over again. That's not   how most human beings will write unless they're  trying to be direct response copyriters. And for   the most part we are not. So find a way to  adjust the prompt. Cool. And then everything else   looks pretty good. So I should be able to actually  like push this. Um, thing is I don't really want   to because then I'm going to have to publish this  on my own LinkedIn, right? Ah, I guess we're going   to have to test it. All right, why don't we go to  another page here and then just verify whether or   not this is being published to LinkedIn around  personal profile. If it is my personal profile,   I'm just going to delete it basically immediately  because I don't want all my fans to see   that. How do I do this again? Good god, man. Okay,  here we go. And we should be able to right click,   press delete post, right? Okay, cool. Okay, just  ran into one issue right before I did this. So,   I'm just going to Oops, that's not what I wanted  to paste. Um, I wanted to paste this. There   you go. So, we ran into a problem just as I was  about to do this. I don't know if it like out   um just ran out and sort of timed out or  something, but okay. There we go. There we   go. That's better. Okay. And now we should be able  to go to dashboard. I would hope anyway. Okay. It   is going to force me to do this signin flow. We  do have some more platforms here as you could   see. Fix the onboarding wizard as well. It should  now um function off of live data. Right now it's   just doing the basic pass with templated stuff.   Okay. Setup. All right. Here we go.    Content library. Go back to new syndication here.   Go drive blog. Why don't we get something maybe a   little bit shorter like this. Paste that in. Click  generate. We'll exit out of X Twitter so that we   only have the syndication option for my LinkedIn.   Then we will go to my LinkedIn and then see if we   could actually publish this. This is a blog post  I wrote basically all about interacting with my   YouTube comments. I said uh you know the statues  that we are building aka our YouTube comments last   way longer than the statues that people throughout  history have built because we don't know if people   are going to be looking at these comments in  the year 2148 and the year 20,048 or what.    So there's a lot of potential life there. Okay.   Clicked publish. Refreshing. Not seeing a post,   which is good. I just clicked publish.   I'm not seeing a post on the LinkedIn. Uh,   let me just on the generated content. Really helps  to be hyper specific. Did this copy work? Yeah,   the copy worked. Okay. So, just want to double  check. Going to refresh this. And then I'm also   going to head over to left click and see maybe if  we published it to there instead. I should be able   to pull this up just by going back to the LinkedIn  page. Four left clicks. So, I can click on that.    Go back to the company page and then we'll go  page posts. Okay. I'm not seeing a page post here,   which is nice. Oh, wow. 675 followers. Did not  have any idea 675 followers in that company page.    That's funny. Looks like there was a specific  issue with how we pushed this, which is okay. So,   we're going to use actual API generate calls now.   And then I have the post right over here. Just   going to head right over here. Click publish. Not  seeing any sort of notification. That's an issue.    So, I'll head back to Cloud Code. I'm not seeing  any sort of notification after I click publish.    Honestly, the experience doesn't feel very  snappy to me. I think the cursor might also be   uh reason why. Find a way to just improve the  perceived customer experience when they click   that button. Whatever it is, toast, menus, and  whatnot. We'll go back here. I'm just going to   quadruple check. Make sure I didn't. Did I post?   No, I haven't posted. And then I'll do the same   thing for leftclick. Let's go leftclick LinkedIn.   Just double check that didn't post to either.    It might have. Just unsure if I'm posting to  company pages right now or my own. Okay, doesn't   look like I'm posting to either. One thing I'm  seeing here is we actually have been storing these   in the database now, which is cool. Um, our local  database to be clear, but still a database. And   so, you know, we can copy this. We could post this  to LinkedIn and whatnot if we wanted to manually.    Um, but I do want to check to see whether or not  we could post u specifically like uh, you know,   using that flow that we showed you earlier.   So, I'll go back to new syndication. We're just   going to do one more. Okay. Yep, we got it. I  got to delete the hell out of this thing ASAP,   please. Thank you. And uh yeah, we've just  verified that this actually does post. So,   fantastic work. That's incredible. Um, super  cool. Super cool. I'm going to go back here. Hey,   I tried publishing and the first time I clicked  it, nothing happened. I waited five more seconds   and then I clicked it again and that time it  went through the whole publishing loop and   it actually appeared on my LinkedIn. Diagnose why  this might be the case. Go ahead and fix. Another   cool feature is in the top rightand corner we  have a new. So I can actually just click new,   go back here and then do another one. Um and  then I can also store all of that as you guys   saw before inside of the content library along  with the specific generation for that um rung. So   that to me is really neat. Also the fact  that we have sort of the ability to go listical   view is cool. You can tell that this really ran  with the spec that I gave it and it's um it's done   a good job. I don't know. Okay, cool. Yeah, even  the search works. So very high quality stuff here.    I'm going to head over to voice profile and see if  I could maybe set this as the default casual blog,   do some editing and just double check what's  going on. So, as you can see, we can select   these here. Um, I don't know. Is there any way  to like go deeper into what the actual prompt is,   though? I'm not seeing that. I'm just seeing  like the ability to calibrate formality, humor,   and emoji usage. So, I think I'm going to have  to add that feature. Hey, under voice profiles,   I'm noticing that we can calibrate formality,  humor, and emoji usage, but I don't see any way to   adjust the actual prompt itself. What I want you  to do is to add just like we have in the wizard   some sort of advanced drop down that I can click  on that allow people to actually modify the uh the   underlying text as well. Under analytics, I want  you to make sure that we are actually reflecting   real analytics. Uh right now I'm not sure if we're  pulling from our database or what's going on. I do   see that the recent activity here is updated with  the LinkedIn post, which is pretty solid, but I   want to make sure that everything else is good,  too. Finally, under scheduling, um verify and   test that this works for LinkedIn. It looks like  we have a scheduled post coming up. That said, I   don't want you to actually publish it on LinkedIn.   Um, I just want you to verify that everything   works up until that point. I've now been given  this initial schema. What I'm going to do is I'll   head back to Superbase, go to the SQL editor, and  paste this in. Just verifying that these comments   work. Okay, it looks like they do. I'm now going  to hold command and press enter. We're going to   run this. And we see success. No rows return. I'm  going to go back to Cloud Code. And it looks like   my Gemini subscription is finally coming back. The  rate limiting said it would be 1228. So, we have   just another 10 minutes here before I can get  back to that. Um, which I think I'm going to do   for like a final design. But that should allow us  to push through probably most of like the database   migrations and stuff. Superbase SQL added. You  know, just to be clear, I don't like combining   multiple um different models like while I'm in  the middle of a development session because I   like all of the context that Cloud Code has to be  used in the cloud code thread and all the context   of Gemini has to be used in the Gemini thread.   generally speaking, you get much higher quality   results because uh this thing has processed so  many tokens at this point. You know, has so many   so much history of like past design decisions and  stuff like that it just inherently gets what   it is that I'm trying to say. If I were to try and  just have Gemini, hey, pick up where whatever left   off, you would basically have to do the entire  job of retraversing all of those failed paths. So,   we're going to push this through with cloud code  and then at the end I'll probably do like a little   design or redesign. Um maybe do some finishing  touches, some final polishing with Gemini.    Okay, so I'm going to say let's go 100% superbase  and we should be good. And it just got back to   me saying that the superbase migration is now  complete. So it's also given me a summary with a   bunch of API route os. It's verified the build and  whatnot. Verifying the build to me is not enough.    I need to actually go through the whole testing  um end to end. So I'm going to have it log in,   put in some credentials, and actually like do said  testing on its own because it has the ability to   screenshot things and whatnot. Then once all this  stuff is done, it's just a matter of pushing that   to um you know actually like a like  a Netlefi host and then also adding payments   and stuff like that. The reason why I'm not adding  payments right now is uh I sort of had a change of   heart. I thought a little bit about um what would  Stripe require in order to set all this up and I   think Stripe would work better with like a live  published app since uh it has like a fair amount   of callback functionality and I want to be able to  give it a URL. So I I'll do all that stuff after.    Anyway, I'm not touching anything here. Model is  now proceeding autonomously and it's doing set   testing without me. spotted a couple of issues  so far with the voice profiles table. So, it's   going to go through and then actually apply the  migration. I can see this doing a bunch of silly   BS here trying to solve some Superbase issue. So,  I told it just to give me whatever uh it needs   and I'm going to go through and actually I can see  this doing some silly BS issue. Um what I'm going   to do is I'm just going to run this directly  in the Superbase editor instead. It's saying   alternative install this via Homebrew to run it  from here. I mean, like it can, but I don't know.    I don't really want it to waste my damn time or my  tokens. So, I just created it. Um, should be good.    Cool. Yeah. And you can see I've already done the  creation. So, we've saved ourselves some tokens   there. I would hope. And uh yeah, I mean like  that's why I keep an eye on it. Good mental model   here is pretend you're at like uh some security  desk job and part of your job is just like   reviewing CCTV footage and there's like 10 CCTV  things in front of you. You're just like kind of   glancing around at each. It's basically what we're  doing here. Although um you know with a little   bit less context switching since I'm using fast  mode. But everything that I've done here, you can   absolutely replicate with like two or three cloud  windows open. The reason why I'm starting with   GitHub first is because I want this to be version  controlled. And to be honest, like you could have   done this from step one. I just uh I'm not working  with anybody else in this project. It's just me,   myself, and I. So this local folder is enough  for me until I get to, you know, the part where   I'm ready to go. You can see it's um looking to  ask a question. Uh h I should probably do this   privately because I don't want anybody to take  my tokens. Cool. We'll do that after it's done. um push to Netlefi. Use my credentials  since we're just demoing. I'll remove   them later. And that way I'm going to  have like my env keys and stuff like   that so I can actually go through the  uh the generation process and stuff. Cool. So now it's setting up Netlefi  deployment and then now we just need to   connect to Stripe. So I'm going to head back  to Stripe and then I'm going to open up that   uh publishable key thing. So signing in should  now open up a sandbox. So what I can do is I can   actually copy the publishable key. Oh, that's not  it. I'll head over to ENV and then I'll also say   Stripe publishable key. Add that. Also go Stripe  secret key. I'll add that. And I realize it's   probably going to have to redo the update. Hey,  just a heads up. I've added Stripe publishable   and secret keys tov as well. Our next step is  going to be to connect it to Stripe to get our   payment integration set up. I'd like you to handle  this end to end autonomously. Once it's done,   um, I'll do an endto-end test of the app myself  and let you know if there's any final changes.    Cool. So, we've since pushed this app live and we  can actually see it at splinter-app. netlifi. app. I   don't really think I needed that dash app there,  but the model made that choice and that's okay.    Um, I'm liking this. It also looks like we have  that nice little I didn't really notice, but we   have that nice little 3D geometric background.   Um, we're going to have to find ways to insert   these pipeline visualizations. I've realized now  that we haven't done that on the landing page,   but it shouldn't be too hard. I think we'll be  able to sort that out pretty quick. I'm also   going to want to widen the landing page a little  bit because notice how the hero header is really   wide and then everything else is really kind of  compressed. So, I'm just going to voice dump this   and then um have it run through some final  designs. Hey, the landing page looks solid.    Just checking the live Netifi link. Now, I'd like  you to add more platforms and social proof. Um,   so just add more company logos and stuff. Aside  from the hero header, I find that everything   underneath is pretty squished. Like it's not  very wide. It's very narrow. So I'd like you   to significantly widen the design. Also, we have  processing pipeline visualization, tone analysis,   matrix, multi format, compiler. These three are  placeholders that were meant to be filled in.    What I'd like you to do is actually go through our  app and then fill this in with relevant sections.    um not screenshots, but actually just mini builds  that uh elucidate various parts of the app,   whatever the specific feature is. Make sure  to widen the pricing and then the call to action   as well. And just in general make this a little  bit longer and a little bit sexier. All right,   let's take a peek at that actual landing page now.   We should have everything essentially ready. Oh,   that is so cool. I don't think I'm going to get  over just how interesting it is to move my mouse   around. Um, looks like we added significantly more  context here. So, we could see these little steps.    And wow, that some of this is actually dynamic,  which is wild. So, future content creation isn't   about producing more. It's about distributing  smarter. Here's how we scale our reach 10x without   hiring a single additional writer. LinkedIn X,  blog, whatever. That's cool. We can then actually   move these things around. That's really, really  interesting. Oh, wow. Nice. So, we can move the   emoji usage and stuff like that around and then  add various features and buttons. And this   over here has a bunch of different sections for  different types of formats. Hot take. If you're   still copy pasting the same content across every  platform, leaving 70% of your engagement on the   table. Hell yeah. Threads. We added some more  steps down here. So, clean. We then added some   data. We added an additional pricing tier,  which is nice. Creators love Splinter. So,   we have some supposed big creators. And then  we can start our free trial or book a demo. I   don't know if there is a demo feature though.   Is there? Yeah. Okay. So this is where we add   our calendar. It's pretty neat. I'm probably  not going to do the demo stuff. Um anyway,   that's fine. We'll start free trial. So now I'm  going to add some context. So we'll go Nikki   Sarif. Go Nick@niki. com. Actually, why don't we  use a real email? We'll go a very simple password. So the creating is now taking us to the  onboarding. This is super clean. So maybe we just   want LinkedIn for now. We're going to set up our  voice. So move this around. Looks like we don't   have access to that advanced section just yet.   Let me see if I could pull something from my blog.    Maybe we'll say this. Paste this in. Then I'll  click generate. We should go through a generation   script here and it should be real. Okay. So  the output is what you get in production. Nice. Cool. This is now taking my post and then  it's um iterating on it slightly. Wow. This   is great. Nice. Oh, nice. Yeah. So I think  the difference here and the reason why   this reads so well is because I specifically told  it do not have those crazy short sentences with   like super long sentences immediately after  and then alternating cuz it's like blah blah   blah blah blah that's not pattern  that's signal right it's like you know that   that's AI just the way that it writes it this  has solved that for me which is clean okay   nice anyway finish setup apparently we're  all set so we'll go to the dashboard here   okay And we ran into our first issue, which is an  application error. So I'm going to paste this in. This occurred right after the onboarding wizard.   And now I'm just going to continuously push until   I get all the way through the app. Now,  logically, what we should do after we are   done our little onboarding wizard is we should  go directly to a pricing page. I'm okay with   people making like their initial request that  little LinkedIn rewrite thing without having   to sign in because while I know some people abuse  that um the abuseness I think will be outweighed   by the convenience and then the wow factor of  actually just being able to pump content in and   then getting it like nicely formatted and tuned  for LinkedIn. So I'm going to keep that in. But   immediately after like we do want to force them to  pay and at that point they'll be in a little bit   of like reciprocity like they will just have used  our app for free which allows us to say use for   free and then in return um you know it's sort of  like a teeter totter or a scale in return   they're going to want to balance that by paying  us and then I think I'm going to like make the   intro offer like pretty affordable so people can  you know sign up get the ball rolling and stuff   like that without necessarily having to spend  a lot and then um from there you know as they   go grow addicted to Splinter her then uh you know  eventually the monetization will improve. Okay,   this looks pretty good. Nice. All right, so why  don't we give this a little refresh here and   see if our data is still in. Beautiful. So we have  this. The thing is we don't have any tokens. So we   do have to ask ourselves how many credits. So free  plan. Okay, so we can do five I guess in total,   right? So maybe we'll go new syndication up top  here. We can create content. But notice how we   don't have LinkedIn or Twitter. So, one more  change I'm going to make is under Oh, actually,   I guess that's to be expected because I selected  LinkedIn and then that one X or Twitter does not   have an API and then blog is manual. When I click  new syndication, there's currently only LinkedIn   X/ Twitter and blog available. I'd like you to  add all. We also need to force the user to connect   at minimum LinkedIn and we need to do this post  onboarding. To be clear, are we giving them five   free credits as in five free generations? Another  thing on LinkedIn is now that my app is live,   we actually need to change the URL. So rather than  being localhost 3000, which is what it was before,   we actually have to go back to Splinter and then  type in this, not that, this. So that should now   give us the right redirect URI, which now if  I click on this, this will take us back here,   which is good. So, I'm going to paste in this  password, click sign in, see if I have to   connect via this. Okay, no, and I don't. That's  great. I'll head over to dashboard here. Now, we   have one active platform configured. And um what  else we should do is we should offer some sort of   like notification saying, hey, connect an active  platform. If a user has zero apps configured, then   encourage them to connect to platform. Um, drip  this out in various places throughout the app.    Okay, I'm going to add that here. And then I'm  just going to paste this in, then click generate.    So now I'm actually going to run through and  I want to see how this interacts with credits,   right? We're not doing payments here. We're  just doing um credits. It's your consumption. Cool. This looks pretty solid. Okay, nice. So I  can do that. Let's check and see whether or not   this is actually going to work by heading back  to my page. And then I'll also check my posts.    Then if I can make the post, uh I'm just not  going to test it again. I'm just going to assume   that this is going to work. Okay, it's saying  published. Refresh. Okay, cool. So, I'm going to   now delete this. That's pretty great. Uh posting  functionality, which is the core functionality,   clearly works well. Okay, going back to  the dashboard, we now have one generation,   but no tokens have been consumed. So, we're going  to have to fix that as well. I'm not seeing any   credit consumption. I just submitted a request as  a Okay, cool. So, credit consumption here hasn't   been fixed, but I do have this, which is nice.   So, I have the whole post. That's lovely. Let's   um see if we can create a voice profile now. Okay.   And then we can also adjust the system prompt,   which is nice. Cool. Looks like there's a uh  default system prompt here. And then there's   also the ability to add writing examples. Nice. I  really, really like this design. It's super clean.    Very brutalist, which is nice. As you can see,  we have one data point. Um, it's picking up our   time. So, 12:57 p. m. we submitted one, which is  really cool. And then it looks like we've outputed   one LinkedIn post, but it's also writing one  Xthread. Also, I only published this to LinkedIn,   but it's telling me that I've also published  an X thread. Perhaps we should just add more   context surrounding output types in analytics  so that they know that you have the option to   copy from Xthread whereas the LinkedIn post  was actually published. Okay, heading down to   scheduling here we could see a content Q. So  this is the generation I can actually select   uh something I have generated which is neat.   So maybe instead of like publishing what you do   is you just generate a bunch of things. You then  select the specific platform you want. So in our   case LinkedIn then you can set the date using this  cute little calendar. So, why don't I pretend it's   2025 0228? Okay. And then I don't know, we'll  do 255 in the morning. That looks good. Let's   add to Q. Cool. And so, now we do have something  coming up on Saturday at 255, which is nice. Now,   moving over here to setup. It looks like I can  change my account details here. Let's just pretend   I'm only saving my name. If I refresh this, you  see that does not persistent. The setup page   doesn't save my account details when I change it.   For instance, I changed my name from Nikki Sariah   to Nikki Wiki. I press save changes and then  refresh the page and there was no um context   there. I do like how under billing we do have uh  both the free plan and then we have starter, pro,   and business. So, that's nice. Then we have  these little notifications and it looks like   they're toggling fine, which is good. I do wonder  I don't think that this is 100% hooked up. So,   we'll have to double check that. We have the  ability to delete an account. Oh, wow. Okay.    Okay. And that autodeletes. So, we need to set  some sort of like feature that basically checks.    I just clicked delete account and it immediately  signed me out. Make sure that there's some sort   of are you sure message. Okay, that looks pretty  nice. Okay, now I guess this is good for me. If   this actually did delete my account. Okay, no,  it didn't actually delete my account. I see. So,   it just said that it deleted my account, which  is unnecessary. Never mind. It just said that   it deleted my account. It didn't actually do the  deletion. Okay, now I'll generate new key example   key. Okay, and then we need the curl details.   I'm just going to see if we could key here. Let's reveal this. And I'll say API key  send a request to this URL using the format.    Let me see if it makes any sense whatsoever.   API splinter. io. Okay, for the API request, it   doesn't look like the domain is a live host. Um,  update everything so that it reflects the new URL,   not api. splinter. io. And then finally, we have  this web hook feature, which uh I don't know,   let's just go web hook test. And over  here, we can copy a web hook URL. We   could basically paste that into our app and say,  "Hey, when this is complete, scheduled or posted,   I want you to deliver to this. " So then I'm going  to go back to content library. And then I'm just   going to do one more. So I guess we'll go to  dashboard, new syndication here. Then I'll just   copy all of this over again. Paste it in. Okay.   And we have all the rest of these buttons now,   which is wonderful. Click generate. And then I'm  going to go here and then check to see whether or   not a web hook was actually sent. If the web hook  wasn't sent, I don't believe it will be. I'm just   going to notify the agent. Hey, the generation  occurred, but the web hook was not sent to the   address that I added. Um, double check that all  of that is okay. I imagine there's probably some   issue related to the fact that we're not on the  URL that we initially thought we'd be on. Yeah,   cool. So, we have that the generation has  occurred. We didn't end up getting that.    I can copy this, though. Go back to dashboard.   Now, I see we have two created. And there's the   content library here with the the second  post, which is nice. Okay, what else is it   telling me? It's telling me that um all the code  examples have been updated. So, I should be able   to go back to API access here and then give this a  little refresh. I'm giving this a refresh because   I wanted to hardcode the change. Okay, just  taking a look at this code. Example still says

### [5:50:00](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=21000s) Feature Integration and Enhancements

Okay, I'm going to go to upgrade and let's see  if that works. So, we can now select one of these   three options. So, I'm going to go pro. Seeing  that it's opening up a Stripe checkout page,   which is good. I'll go to USD and then I'm  just going to pretend enter some details   here and then click subscribe. Looks like the  processing is occurring, but is it going through?    Okay, cool. So, it looks like it went through.   Did we go back to checkout? Okay, cool. Yeah,   we have and we've upgraded. When a user pays, um,  add some confetti or something upon the redirect   only when they make it back after paying. Okay,  after a little bit more back and forth, you can   see we actually have the right profile set up. So,  I'm going to head back to Stripe, generate a new   key, and then actually reveal and then copy this  whole key. And I'm just going to see if this ends   up working because that's the API functionality.   Okay, we're still getting unauthorized. Um, this   using this superb basease session. I don't know  exactly what that is. I imagine this is probably   going to solve it. Yeah. Okay. So, we we're going  to have to rewrite that a little bit. The good   news is the name now saves along with various  password problems. Uh, we've now solved all of   that. Wonder what managed subscription is going  to look like. I've never been there before. Oh,   nice. Okay, cool. So we can actually like we we  literally have like our own managed subscription   page which is Sweet. Um why don't I go to  dashboard just so I could take a look at that as   well. Cool. So here are the generations and stuff  like that. Nothing upcoming because I don't think   we have anything scheduled. Yep. Cool. Yeah. All  right. This looks pretty good. Generated formats.    LinkedIn post two generated exert one generated  formats generated. Cool. This tells me what   they are now. And then we have access to all of  our old posts. Awesome. So now I'm just going to   mobile optimize this and then run security audit.   And then honestly that's it. We're live, baby. We   can see we're actually sending over a live API  request to the Splinter-app API as well. So,   this isn't just a front-end app for us anymore.   This is entirely um yeah, this is super clean.    Super clean. So, yeah, pretty stoked about that.   We also have the API functionality. Obviously,   we could paste in links as you guys have seen.   Not going to lie, this is pretty solid as far   as apps go. We uh now basically have something  that's capable of doing everything that I want.    Last thing is I'm just going to paste in this  security prompt. And just because we've done   this what three times now, I'm not going to bore  you all with the details, but suffice to say,   using Gemini 3. 1 Pro in conjunction with Claude  Code for both a mixture of front-end design and   then backend configuration, route creation,  and then payments, and so on and so forth,   is pretty dang efficient. Now, I should note  that we used a ton of tokens this time, and I   don't actually recommend using that many tokens,  like committing that many tokens to an app. Um,   I just did this because I traded off speed uh  basically for money. I wanted to get this done   as quickly as humanly possible because of an  upcoming engagement, not necessarily, you know,   have three or four instances of cloud running  or uh, you know, take three or four hours when   realistically I could have done it in 45 minutes.   So, I'm not going to push the fast mode on you.    It's just an option. Uh, just keep in mind it does  cost a fair amount. This session was probably at   least $70. And I'm sure you can imagine if  you develop an app every couple of days or   work on your codebase every few days, that sort  of thing is going to add up pretty quick. For me,

### [5:54:00](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=21240s) Pricing and Marketing Strategies

I'm happy to do it because of the arbitrage and  then the value that I got to produce. Hopefully   you guys now see how to build an app just like  this. Not just a simple CRUD app, but a CRUD app   that also has API wrapping functionality that does  OOTH integration with social media platforms even,   which are some of the most secure and difficult  to authenticate and organize. And then finally,   um, payment integrations as well, like with  Stripe. All right, so you now know how to   vibe code an app. Congratulations. However, most  people that have gotten to this point are probably   not just interested in building internal apps and  tools for themselves. Like, if you've gotten to   this point, you're probably really interested in  building for other people, whether it's consumers,   whether it's other businesses, maybe it's some  organizations that you're working with or whatever   you want to help economize their workflow and so  on and so forth. And so, what I wanted to do next   is round out the course with a module all about  pricing, packaging, and selling what you build.    Now, most people that are here in your shoes,  okay, that are probably interested in um pricing,   packaging, and selling what they just put  together, don't really have any experience doing   so. And so, it's not that they don't have any like  vibe coding um business experience. It's that they   don't have any business experience in general. And  so, what I wanted to do is just give you a very   highle look at some tactics and playbooks that  you could follow to significantly streamline your   ability to actually successfully go out there and  then sell this sort of stuff. whether you know at   a small scale or whether at a large scale, whether  your goal is to replace your income or whether   your goal is to, I don't know, start a business  that does $100 million. Now, I think there are   a lot of people on YouTube that make courses on  vibe coding and stuff and um they're like, "Oh,   you know, here's how you make all these super cool  crazy apps and here's how I spun up 500 clones and   publish them to the app store. " But not a lot of  these people have actually made money. So, I know   that this is a vibe coding course, but hopefully  it'll allow me to dive a little bit into the   business side of things because personally, that's  what I find the most interesting. Collectively,   my businesses make over $300,000 a month in  profit. Um, and that's a pretty easy number to   hit revenue-wise, I think, if you know what you're  doing. But profit-wise is a different story. So,   all this to say, you know, I do this sort of  thing professionally. I generate revenue outcomes   and profit outcomes professionally for businesses  at this point. Let me run you guys through at   least at a high level what I know and what you  guys can use to make some money with vibe coding.    So, the big thing I want you guys to know is over  the course of the next, you know, 5, 10, 20 years,   um, software will no longer be the moat. So back  in the day, right, 30, 40 years ago, if you were   a cool startup and you were working on some new  computer system, okay, and you were smarter than,   you know, your competitors and you spent more time  on it than competitors, you might have had like   a small edge and maybe with that small edge, you  would have carved out like an operating system or   something like that. And maybe potentially you  would have called that Windows OS and then you   would have sold that at scale to people and that's  how you would have made your money. So if you   think about it like Microsoft and Windows, Windows  uh was like software mode, software as a mode.    Same thing with like the Apple brand of computers.   I don't know applications   afterwards like Photoshop and like various  databases and stuff like that. Businesses that   were built entirely off of software made sense  like 30 or 40 years ago because software back then   was very difficult to make. Okay. Well, nowadays  software is very easy to make as hopefully I've   just demonstrated here over the course of the  last six or seven hours or however long this   damn course ended up being. So, we've transitioned  pretty heavily. Unfortunately, a lot of people are   still stuck in that old school world where they  think, okay, that they're going to put together   this incredible software solution that nobody else  in the market can do because they're smart and   they're intelligent and they're visionary,  they're a forward thinker. The probability that   you do that is extremely low. It's extremely low.   Not just because, you know, nobody's as special as   we think we are, but uh because there are soon to  be 100 million times as many software engineers in   the form of AI agents than there ever would have  been human beings. And so moes are no longer made   through software. Your edge in the market is no  longer in the cool algorithm that you come up with   or whatever the heck. Okay. where the moat is is  in distribution, which is fundamentally different.    And rather than play by the software mode playbook  like everybody in their mom is doing right now,   um I encourage you to play by the distribution  mode playbook. Hypothetically, why do you   think Netflix is still Netflix in a world where  literally anybody could just tell their agent,   hey, here's Netflix. com. can you go and recreate  everything about it and then I don't know you   know host the servers and set up databases  and set up all the infrastructure and then like   have a little login page everything like that the  reason why Netflix is not broke you know today is   because Netflix contains within it distribution  it contains a collection of clients vendors   relationships their staff their team their culture  and so on and so forth and these are   things that an AI agent and until they, you know,  hook it up to the cloning vats and start pumping   out clients, vendors and staff members, um,  cannot currently do or reproduce. And so software,   which used to be like the golden goose, right,  has basically been replaced almost completely   with distribution. Okay? And in a world where  anybody could build any software, the only thing   that makes your software different from somebody  else's software are the customers essentially the   vendors, the relationships, and the staff on  your team um that manage it. Anybody in 2026,   2027 and beyond with a couple of ideas, a high  degree of agency, which just means your ability to   like enact your will on the world, go out and do  things, and a very small budget, just a few bucks,   literally 15, 20 bucks, can now build whatever  the heck they want. the whole moat, the whole   edge is just your ability to actually reach and  then retain people within an ecosystem. And if you   can do that, right, and if you can focus your time  and energy accordingly, then you can make a lot   of money. But if you're stuck in the software  days, then you're just spinning your tires,   man. The whole world's up and moved on and you  don't even know it yet. Hypothetically speaking,   I want to pretend right now that um you know,  we we got a little clock here, and this is a   terrible drawing of a clock, but you know, bear  with me. Just pretend that this whole thing is,   you know, a 60-second um hand. Imagine that the  entire life cycle of this vibe coded business that   you are about to start is this hand. Okay? And it  traverses a whole 60-second length. Here is how   much I'd recommend that you actually spend on the  vibe coding part. Okay? Over the full 60-second   life of your business, I would recommend you spend  maybe 3 or 4 seconds on the actual building. Let   me make this a little smaller so we can see it  better. Everything else, okay, literally the   rest of all of your time, my recommendation would  be to spend it not on building, not on tweaking,   not on making your server infrastructure better,  not on doing whatever the hell. My recommendation   would be to spend it on marketing. And this isn't  a joke. If you spend 3 seconds or 12th or 5% on   building, you should spend the other 1920ths or  95% on the marketing. I don't know if you guys   have been in like the build and public space  on X. I used to be uh you know following that   fairly frequently because it was just interesting  to me how people would share their revenues and   talk about the apps they were building. And back  then they said you should spend at least as much   time building as you spend marketing. You should  spend at least as much time marketing as you do   building. And I was like okay so 50/50. Um that  was like four or five years ago. That no longer   applies. You need to spend like 19 to 20 times  as much time marketing than building cuz anybody   could do the building. The building is literally  just like your entry ticket to get onto the ride.    The whole ride itself is your poorly spelled  marketing. So without marketing and sales,   to be clear, you have no product. You may think  you have a product, but it's not a product. It's   just a hobby because without customers, you  don't have any sort of business. You need   revenue and so on and so forth. There are also  some additional benefits to having um customers   that go far beyond the money that they pay you.   If you have customers, what you get is you get   faster iteration because you're listening now to  real market feedback. You're not listening to like   your own opinions and your assumptions, which is  what most builders will do. Most builders are like   heavily biased. I mean, who the hell builds  software products anyway? For the most part,   giant nerds, okay? Myself included. I don't know  what the average human being that uses my product   actually wants or thinks. So, everything that I'm  doing is just assuming. I'm using my own opinions   essentially and I'm hoping that my opinions  are correct because I possess a strong level   of empathy or whatever the hell. But the reality  is most of the time I'm wrong. You know, it's like   a ven diagram. You know, maybe like if this is  my opinions, maybe only like 50% of my oh my god,   I really need to I'm writing like a doctor.   Um only like 50% of my opinions are actual   reality. And so the only part of like this ven  diagram that I'm actually moving the needle for   and like building features into my app that  actually make sense, okay, are over here. But   like the other 90% is all [ __ ] you know? It's  all like uh I'm just wrong. So why would you even   like worry about your opinions? Instead, focus off  reality and ground truth. The only way you can get   reality and ground truth is getting customers.   The ideal is sufficient number of customers.    so many so that you could start averaging  out their opinions and beliefs and desires   and needs and so on and so forth and then you  just start designing for them. So rather than   letting your own assumptions build the product,  use customer requirements, use customer needs and   actually do like customer surveys. Launch your  vibecoded app today. You know, hypothetically,   you've seen how easy it is to do. You know,  I can build one of these in just an hour or   two. Okay? And then contact 20 people and have all  of them use your app for free and then tell you,   hey, I liked this. I didn't like that. Hey, I  thought this could have been better. Hey, this   didn't really solve my need. Hey, I wish it did  this. I wish it did that. Take all that feedback   and then use it to design the next version of  your app because it's not the first version of   your app that's going to make you any money. It's  like the 20th version of your app that's going to   make you money. In addition, because customers and  distribution is really the moat, your whole focus   should be on maximizing the customer experience at  every step. It should not be on making the nicest,   sexiest, most polished app. And I know this is  kind of annoying cuz I did just spend the last   part of, you know, five or six hours hopefully  teaching you guys how to do this and how to like   make a really good product. But in reality, the  product, as we've seen, is really only like 5% of   the whole pie now. So, focus instead on acquiring  as much distribution as quickly as possible. I'm   going to run through some specific ways on how to  do that. And then once you have that distribution,   um try and satisfy the needs of your customer.   And then generally and consistently iterate on   the product. Okay. So, highle advice aside,  how do you actually do the big thing that I   think a lot of people are wondering? How do you  price your product? Well, what I want to do next   is talk about essentially my core principle for  pricing. And this is a core principle that I've   used to generate tens of millions of dollars in  revenue across a variety of businesses, small   to mid-size businesses, my own agencies, digital  marketing businesses, uh a couple multi-billion   dollar portfolio companies. And um this is  something that I just I continuously return   to you because it's the easiest and simplest  way to price. So, it's called VBP or valuebased pricing. And so in value based pricing, what  you do is you price based off the value that   your app delivers, not on your costs or your  competitor's pricing. You know, and I think a   lot of people are like, well, I have to anchor to  my competitor's price, don't I? And to me, I say   I mean like obviously your competitor's price is a  factor and people are going to be doing some price   shopping. But if you focus on the value instead of  at what your competitors price rather than running   uh down to the very bottom and it being like a  race down below like a lot of these freelance   platforms and stuff where somebody bids nine,  another bids eight, another bid seven till you're   at freaking zero. What we do is we just establish  how tremendously valuable a product is and then   charge such a vanishingly small percentage of said  value that the customers are bought in regardless.    I mean to them it's like a it's a pittance.   And I know this because I also purchase software.    um what ultimately a lot of B2B software users  are looking for is something that maximizes their   return on investment and minimizes the friction  involved in making the purchase decision. So let   me explain what I mean by all this. There are two  types of value that you can produce at least in a   B2B environment. In a B2C environment you have  additional types of value. Those types of value   are nonmaterial and so it will not be discussed.   You have the ability to directly reduce their   expenses which is the money that your product  will save a customer if they use you. And then   you also have the ability to significantly  increase their revenue in opportunity cost,   which is also termed the additional money  customers can now earn because they use your   product. I think direct expense savings are pretty  simple, right? If I have product X and product X   currently costs the user $100 a month and I say,  hey, I just built product Y. Product Y only costs   $5 a month. What do we have there? What I've done  is, if you think about it, I've saved the customer   $95 every month. And so the direct expense savings  are 95 bucks. Easy. Now, an opportunity cost. Now,   opportunity cost is a little bit different.   Instead of focusing specifically on what the   delta between, you know, their old thing and then  their new thing is, what we focus on instead is   how much time do they save and what is the  cost of that time. So I'll give you a brief   little example. Let's say hypothetically you  are currently a salesperson. You work at big   company. Big company pays you on average about  $100 per hour. Right now, as part of your day,   you do some [ __ ] admin task. That admin task  involves filling out some CRM or whatever. And   on average, every single day, you have to spend  2 hours doing this. Okay? So, they're paying you   $100 an hour. You're doing an admin task that is  worth 2 hours. If you hypothetically could build a   software solution that enable this salesperson  to spend zero minutes doing this admin task,   how much money are you saving this salesperson  right off the bat? You're saving this company   right off the bat. You're saving $2* $100 an hour  or $200 an hour. That is your direct expense. But   if you think about it, what do sales people do?   Salespeople are tasked with increasing the revenue   of the business that they work in. Hypothetically,  let's say if instead of focusing on admin time,   they then focus on sales, aka calling people or  whatever. in those two hours they could contact   50 people and if in one in 50 people end up  purchasing a small product or something like   that okay which is their conversion rate and if  the average cost of that product is let's say   uh I don't know $500 then by saving 2 hours a day  not only are you adding $200 sorry $200 an hour   I meant $200 not only you adding $200 back to the  core business that you built the software platform   for you're also adding If you think about it,  an additional $500 in revenue. So this is minus   $200 of expense. Okay? And this is plus $500  in revenue. And if you think about the total   amount now that this software product is saving  or generating the business, we have come to   $700 in value and that's per day. Okay. So the  expense portion is about saving money whereas   the revenue portion is about reallocating the time  that your software solution is now saved to allow   a person at a business to focus on higher revenue  things that actually produce for a company. And in   practice usually these expenses are much smaller  than the total amount of opportunity cost aka   the revenue that you are unlocking. So you know  how earlier we built a thumbnail generator? Well   here's a quick example of what that might look  like. You have direct cost savings. Let's say   right now whatever system that they are using  cost them $50 a thumbnail and they generate 20   thumbnails a month. That means that by switching  over to nyx thumbnail company. co, also known as   thumbly, uh you'll save $1,000 a month. But when  you take into account the time savings revenue,   okay, you move this 2 hours per thumbnail design  period to 5 minutes. What you're doing is you're   saving 115 minutes. And hypothetically, let's  say these 115 minutes times 20 are 2,300 minutes   a month. Let's say with this additional time,  which works out to be approximately 40 hours,   this designer or something can actually make  an additional $1,000 a month as well. Well,   now the total value created is $2,000 a month.   What we're doing as somebody that is developing   a thumbnail product is we're pricing at a very  small percentage of the total value we produce,   so maybe 10%. So, we charge 200 bucks a month. And  then the customer ends up making 10 times as much   money as they spend with us for using our service.   Now, obviously, this is going to be an average,   right? Every customer different.   Some people are going to produce way more value   than your $2,000 a month estimate. Others are  going to produce less value. But because you   can't price individually per every new customer  that you onboard, you have to pick a specific   package price. What we've done now is we've  basically used facts and logic to work out what   a strong value would be for a core product and  then how much to charge for it instead of relying   on things like competitor analysis or worrying  about what the dude in the next cubicle over is   doing. And so this is a much more sustainable and  higher ROI way of pricing. You're pricing based   off value. You're not pricing based off of what  everybody else is doing. This young viewers is   how you zigg when everybody else zags. Once you've  established some sort of price for your product,   my recommendation is I actually establish  this as my top price. So, for instance,   um let's say I kind of screwed up the uh writing  here, but let's say this is like your top tier,   this is your mid tier, and this is your entry  tier. You know how there's typically multiple   subscription tiers for a product, right? Assuming  you're doing a monthly thing. What you do is you   take the top and then you set that one at uh you  know, let's say 200 bucks a month. And what you   do is you set your middle at approximately half of  that and you set that at about 100 bucks a month.    but you uh reduce the ROI to compensate. So in  this case, you know, previously I'm offering a   10x ROI on my top. Well, now I'm offering an 8x  ROI on my mid and then a 6x ROI on my entry. And   so in this way, you have like a reasonable product  differentiation. You have a reasonable spread of   values. And this is enough to get you started  before, you know, you can get enough customers,   you can actually run like strong analytics to  determine whether or not people would actually   prefer a $37 a month product or a $58 a month  product or whatever. And that's honestly all there   is to it. To make a long story short, what I do  anytime I'm pricing an app, uh, Pel, an automation   service, a back-end tool, even like a big business  deal, back when I was um, operating a content   writing agency and we were trying to work out how  much to price our product, uh, we do it all based   off of value pricing, which is determining how  much value our product has to the user to begin   with, an expense, an opportunity cost, and then  just charging a small percentage of that. And   that usually ends up being somewhere between 10 to  20% of the total ROI. And as a business owner, I'm   thinking like, hey, I could put my money in the  S& P 500, I could make 8% a year, or I could give   my money to NYX Co. and then I'd make a,000% on my  initial investment. What am I going to do with my   money when presented that choice? Obviously, I'm  going to give it to Nyx Co. right now. Uh, whether   or not somebody chooses to invest in you isn't  just a product of this math. It's also how much   they believe the math, and that's another part of  marketing. But I'll leave that for another day.    Hopefully, at least now you guys understand how to  price set products. But that takes us to the next   big thing, okay? which is well there's pricing the  product but how do I actually get my product out   there okay how do I actually market this amazing  thing that I have developed well there are three   major ways the first is outbound a lot of people  shy away from outbound but outbound was the very   first thing that I did when I started my first  business my first real business about 10 years ago   I went door to door literally knocking on business  doors coming in trying to shake their hands and   then sell them on my little marketing package it's  very difficult but this is ultimately what works   So in this case, you go directly to people who  need your product. You can consider this like a   sniper rifle approach. The two most popular  methods right now are cold email, which is   where you actually craft an email, usually using a  template that appears to be personalized onetoone   communication between you and the person that's  reading. And then you say, "Hey Pete, I love what   you're doing over at XYZ Business. I think right  now you guys are currently spending all this money   on the software, and I can save that for you with  XYZ product. I would be happy to give this to you   for like a major discount because you're going to  be one of my first five uh you know signups. I've   also attached a video here that runs through how  to do X Y and Z. Um let me know if you have any   questions. If I can help you out at all would be  happy to. Okay. And so in this way you're reaching   out directly to them. This is you. This is them  and this is you bridging that gap. That's why it's   called outbound. The other main way to do this  is through cold DMs. And typically you do this   on B2B platforms like LinkedIn. Cold DMs stands  for direct messages. It's just the same thing   as cold email. It's just instead of using like an  email inbox, which tends to be the highway to   the soul, um we're instead using like a LinkedIn  message box or like an Instagram message box,   but it's the exact same idea. Some caveats here.   This works really well for B2B products, but it is   pretty difficult for consumer products, aka B2C  products, since most of the lead sources where   you're going to scrape this information do tend to  be B2B. Like for instance, if you think about it,   LinkedIn is entirely a commercial platform. If  you sign up to LinkedIn, odds are you're signing   up for employment or business purposes. So, you  can feel pretty safe that most of the people that   you're scraping on LinkedIn, you're doing so  because it is a B2B sort of transaction. Hey,   I can help you at XC Corp. Hey, I saw you're  employed at whatever position. I think I can   assist you with that and so on and so forth. If  they're not on LinkedIn, crap gets a lot harder,   right? So, for the most part, anytime I sell B2B,  I start with Outbound. The other big benefit to   outbound is it's just really fast. It is way  faster than any of the other methods on the   list. It's also way harder, right? you sort of  have to put your freaking ego on the line. And   um I can't tell you how many times I got thrown  out of businesses when I was knocking on doors.    Security racing after me being like, "Get  the hell out of this plaza. " Uh but you know,   it worked and it was what enabled me to make  my first uh probably $15 $200,000. That said,   this is not the only thing that you can do. It is  not the only way. There are a variety of others.    The second is inbound, which I think a lot more  people here are probably familiar with. Inbound,   if you kind of think about it logically, is  kind of like what I'm doing right now. What   I'm doing is I'm creating very valuable content.   I'm building a very strong and large audience of   people that enjoy consuming my content. And then  what I'll do is I'll direct a small percentage of   you guys to some paid products so that you guys  sign up to my service or whatever. The issue with   inbound, despite the fact that, you know, if I'm  here and then they're here, despite the fact that   they're now coming to you, is it's a lot slower.   It takes a lot longer to build. Okay. And what a   lot of people don't realize is they'll watch some  vibecoded course or whatever and then be like,   I'm going to make my own app business. It's going  to be awesome. And then they start making content   on it. What they don't realize is like when you  make content um on the wider internet like   on YouTube or LinkedIn or Instagram or whatever,  what you're basically doing is you're like in a   sea of a billion people and then you're  given a megaphone. And then you're like,   "Okay, I have a megaphone. This is awesome. " And  then what you don't realize is every other person   also has a megaphone. And then the big people that  are pretty established have megaphones that are   way bigger than you. And then the small people  like yourself have these tiny little things that   barely produce any noise uh whatsoever. And so  growth on inbound is extraordinarily difficult   as a beginner unless you have some pre-established  success or pre-established wins. And most people   that are starting these sorts of things that  immediately turn to I'm going to post one thread   on Instagram every day for the next year. Uh  they don't understand this. And so what   ends up happening with a lot of inbound is because  it takes so much longer to build and people are so   unprepared for this, they end up just screeching  into the void, never achieving anything. and then   quitting before they actually build up the amount  of momentum required to succeed. If I could graph   sort of like the differences between inbound  and outbound. And I love graphing stuff. So,   in case you've watched any of my other videos,  get ready for a freaking Nyxive graph. Basically,   this is the amount of time that it takes to see  any sort of win. And then this is the amount   of money that it takes. Okay? And I'm going to  I'm going to pretend that blue here is inbound.    And orange here is  outbound. And you guys are going to see why   I prefer outbound in terms of the total amount  of money you could make. Um, if you use inbound,   okay, what happens is you start at this time step  one and then you make no money for a long time   and then all of a sudden your brand picks up and  then you make a ton of money. With outbound, it's   basically the exact opposite because every single  time you send a piece of outreach, it consumes a   little bit of your time. What ends up happening is  you usually have some success initially and then   you start tapering out or plateauing and hitting  a ceiling. And so if you think about it logically,   both of these have major trade-offs, right? But  with outbound, what happens is you make money much   much faster. You know, this might be 1 month. This  over here might be one year. And so with inbound,   what we've done is we've sacrificed all our  money in the first year for money after year   number one. And with outbound, what we've done  is we've sacrificed money after year 1 for money   before year 1. Um in reality things are never  fully black or white and so the recommendation   is usually to do some sort of blended take of both  where you know at the beginning you start mostly   with outbound. Okay. And then as time goes on you  shift more to inbound which allows you to generate   revenue quickly without also tapering out. Um that  said there are a variety of different ways you   could do this sort of thing. That's where business  programs like u mine maker school and so on and   so forth come into play. So I'll leave that  with you and you guys could do whatever you want   strategically there. The third major way that you  could market as somebody that develops and builds   products is instead of trying to build your own  distribution via you know outbound like we talked   about earlier or inbound where people come to you.   What you do is you just take somebody else okay   somebody like Nick Sarif and you say yo Nick can  you market my product for me and then I'll just   pay you 30%. And then what happens is Nick, you  know, can use a combination of both inbound and   outbound methods to do that marketing for you. But  the idea is because he's already developed sort of   pre-existing distribution, it's way faster. And uh  you know, all you're really doing is you're paying   a percentage. So it's more predictable for you.   Maybe it won't necessarily be cheaper, but it's   probably cheaper than you initially buying a bunch  of software platforms, getting a bunch of cold   emails, uh getting a beautiful studio and all  that stuff. So, the whole idea is you just partner   with someone who has pre-established distribution  and then you make it a win-win for them. You're   like, "Hey, man. This software does exactly what  the heck you really like to do. Uh, I think I can   really help your viewers and stuff like that as  well. " And rather than you having to build a whole   new product from scratch, why don't you just use  my product and I'll just pay you a percentage. You   like my product, right? Yeah. Okay. Awesome. So,  it's a win-winwin. As mentioned, it can be inbound   or outbound affiliate, though. Inbound tends to be  the most popular one because it's more scalable.    And then yeah, you're just monetizing somebody  else's audience or work, which allows you to   like quickly jump cut in uh basically return for  some predictable outflow of your money. Okay, so   hopefully I've now showed you guys how to not only  price but also package together multiple tiers and   then also get started with the marketing of your  product. My recommendation to be clear is to start   with some form of outbound laser or sniper rifle  target specific people whose needs you are solving   and handling with your product. And once you have  a solid base set up, maybe 10, 20, $30,000 a month   in recurring revenue, then you can transition  over to maybe building a brand um you know,   doing the whole megaphone analogy that in reality  tends to be the best of both worlds. Um affiliate   is also open to you at any level of the stack.   So whether you guys are early on, whether you   guys are a little later on, I do highly recommend  looking for those sorts of partnerships and then   finding opportunities to, you know, plant your  seed and have other people water them from here   on out. Obviously, I can't cover every possible  business permutation. Some people are going to do   like high ticket SAS style stuff where you have  to sit down and do demos. It's going to be more   sales. Other people are going to do low ticket  SAS stuff where basically people guide themselves   through their onboarding checklist and stuff. Um,  you know, that tends to be more marketing. But   hopefully this at least tells you guys a little  bit about where the market is going and then   how to practically take what I'm talking about  here to improve the quality of your guys' lives,   businesses, and so on and so forth. Okay, that  was a hell of a course. I had a lot of fun putting

### [6:21:59](https://www.youtube.com/watch?v=gcuR_-rzlDw&t=22919s) Vibe Coding Full Course Wrap-Up

all that together. If you guys have made it to the  end, y'all are real ones. I have uh one quick ask,   two, I suppose. The first is if you guys like this  sort of thing and you guys are curious about how   to monetize your own vibe coding business,  definitely check out Maker School. It's my   day-to-day accountability program where I actually  guarantee you your first paying customer for an   AI or automation business in 90 days. If you don't  get customer number one in 90 days, I refund you   in full. So, it's a full 100% guarantee. Inside  of Maker School, you'll learn how to put together   really classy and clever offers, sort of like  the offer I'm using to get you into Maker School,   as well as do things like set up outbound  campaigns, uh, productize your business, and   then eventually scale to inbound, like I talked  about here. Additionally, I'd love it if you   could check out my podcast with Mr. Jack Roberts.   We both talk on AI automation. It's a blend of   news and then us just goofing around, showing  off our boulder shoulders. So, no pressure.    Do whatever the heck you want. Lastly, you'll  find everything that you need down below in the   project description. And then yeah, if you really  like this sort of thing, then please subscribe.    Helps out my channel. Comment and engage with the  video. And I'll catch all y'all on the next one.

---
*Источник: https://ekstraktznaniy.ru/video/11662*