5:02:20Nick Saraev · Essay
How to Think Clearly In The Era Of AI: Full Course
Five hours, thirty-six sections, and one argument: clear thinking is an engineering problem, not a discipline problem.
September 2ndThe argument in one line.
Building software is now the cheap part of a software business, so the leverage moves to steering two models against each other and then spending almost all remaining time on distribution rather than on the product.
Read if. Skip if.
READ IF YOU ARE…
- You have never shipped a web app, can follow instructions, and want a single sitting that takes you from installing an editor to a live app with login, database and payments.
- You already vibe code but keep producing apps you would be embarrassed to expose to real users, and you want the security and deployment steps that usually get skipped.
- You are choosing between Gemini and Claude and want to see where each one actually wins across design, architecture, debugging and security review.
- You can build but cannot sell, and you want a pricing method that does not start with checking what competitors charge.
- You run an agency or freelance practice and want to wrap an existing paid API into something you can charge a monthly fee for.
SKIP IF…
- You are a working engineer looking for depth on architecture, testing or infrastructure. The fundamentals sections are deliberately shallow and the presenter says so.
- You want a free path end to end. A Claude subscription starts at 17 dollars a month, and the presenter burns roughly 70 dollars of tokens on the final app alone.
- You want mobile or native app development. Every product here is a web app deployed to a serverless host.
- You are outside the countries Stripe supports and need a payment walkthrough you can follow exactly.
The full version, fast.
The course argues that a single person with a 17 dollar subscription can now build what used to require a 20,000 dollar per month developer, so the scarce resource is no longer code. The working method is a two-model split: one model writes the comprehensive plan and audits the result with no build context, the other does design and wiring, and both get steered with screenshot references, voice-dumped feedback and a saved markdown file that survives running out of tokens. Every app follows the same loop of inspiration design, local build with fake JSON data, database, authentication last, deploy, then a security audit against five known holes. The closing argument is that software is no longer a moat, distribution is, so price at ten to twenty percent of the value delivered and spend roughly nineteen times more effort on marketing than on building.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 02:51
01 · Course roadmap
The full syllabus stated up front: toolkit, portfolio site, security, dashboard app, software fundamentals, design deep dive, lead-gen SaaS, AI thumbnail SaaS, debugging, content syndication SaaS, then pricing and selling.
02:51 – 22:35
02 · Set up Antigravity and Gemini 3.1 Pro
Download and install, sign in with Google, and a tour of the three panes. Then the parts that actually change output quality: workspace rules and GEMINI.md, workflows as reusable checklists, MCP servers, the at-mention context system, planning versus fast mode, hot-swapping models, and voice dictation.
22:35 – 28:33
03 · Add Claude Code inside Antigravity
Signing up for a Claude plan, installing the extension, and why the presenter talks to Claude in its own window rather than through the built-in agent chat. Covers the four permission modes and the return-on-investment argument for paying at all.
28:33 – 44:23
04 · Product 1: one-shot a landing page and deploy it
A single reusable prompt stored as GEMINI.md drives a question-and-answer intake, then produces a full cinematic landing page. Several variants get generated, a navbar is transplanted from a screenshot, and the folder is drag-and-dropped onto a free host and live in under a minute.
44:23 – 1:02:34
05 · The security 80/20 and the audit prompt
Why apps need what websites do not. Walks the five failure modes one at a time with live demonstrations: hardcoded keys, missing row level security, front-end-only validation, hallucinated and outdated packages, and unprotected routes. Ends by running a copy-paste audit prompt against the site just built.
1:02:34 – 1:10:10
06 · The build loop and the usual-suspects stack
The repeatable order of operations for every app that follows: inspiration design, optional animation, main functionality, local testing on JSON files, database, authentication last, deploy, end-to-end test, landing page. Then a plain-language sketch of the front end, database, auth and serverless backend.
1:10:10 – 1:33:06
07 · Product 2: plan in one model, build in the other
A dashboard design is sourced from a design gallery, a comprehensive build plan is generated in plan mode by the planning model, then the plan plus screenshots are handed to the design model. Early styling and config errors get fixed by pasting errors straight back, then functionality is tested page by page before any styling work.
1:33:06 – 1:43:00
08 · Wire in Supabase: schema, RLS, auth
A checkpoint file is written first in case the context window runs out. Then a project is created, keys are pasted in, the generated SQL schema is run in the editor, signup and login are wired to the hosted auth, and every protected route is manually checked for a redirect.
1:43:00 – 2:06:35
09 · Redesign, an AI hero video, and the deploy
A landing page reference is combined with the existing design, an organic shape is generated as an image then animated into a looping video, colours are unified by pasting a hex code, and the app is pushed to production through the host's command line tool. The first production-only bug is a confirmation email pointing at localhost.
2:06:35 – 2:11:47
10 · Security audit in a fresh context
The audit is deliberately run in the other model with no memory of the build, so it reads the codebase as a stranger's. It finds leaked error details, missing startup validation and a routing default that allows rather than denies, then fixes them.
2:11:47 – 2:28:16
11 · Hosting and databases from first principles
Client, server and database explained as three boxes passing requests, why server-side logic is the secure place for validation, and the local to staging to production path. Then databases modelled as a spreadsheet: header rows, records, primary keys, filtering, and where NoSQL differs.
2:28:16 – 2:42:35
12 · Languages, frameworks, and version control
HTML, CSS and JavaScript demonstrated live on the first website ever published, then why frameworks exist and why they raise AI output quality specifically. Version control is introduced through the essay-final-final-v3 problem, then mapped onto repositories, branches and automatic rebuilds on push.
2:42:35 – 2:53:39
13 · Run agents in parallel
The agent manager zooms out of a single workspace to show every conversation across every project, with an inbox of pending approvals. Four landing pages get built simultaneously in throwaway playgrounds, then the best is promoted into a real folder. Two or three at once is the recommended ceiling.
2:53:39 – 3:26:24
14 · Product 3: a lead-gen SaaS wrapping a paid scraper
The app is sketched on a whiteboard first, then scaffolded from that sketch plus a design reference. The core is a wrapper around a third-party scraper: natural language becomes a filter object, results get enriched, and an AI column writes personalised icebreakers. Long debugging stretch, then the Gemini rate limit hits and the work migrates to the other model with an exported summary.
3:26:24 – 3:48:44
15 · Ship it: auth, GitHub, and an auth bypass
Database and auth are added, personalisation requests are batched instead of run one at a time, the project is pushed to a repository and linked to the host. The security audit finds an authentication bypass on paid API routes that would let any visitor spend the owner's API budget, plus a hallucinated dependency.
3:48:44 – 3:56:45
16 · How payments actually work
The signup, payment, entitlement, consumption loop drawn out. Why the payment processor is never bypassed, what a webhook does when a payment succeeds, the three monetisation models, and the three pieces of code any paid app needs: a checkout endpoint, a webhook listener, and a check before doing the expensive thing.
3:56:45 – 4:51:02
17 · Product 4: a credit-metered image app
A thumbnail generator built around an image model. Long design correction pass to force a light glass aesthetic off a single reference image, then the API is proven by curl before being wired in. Three variants per generation, credits decrement on use, then a payment-validation bug that keeps redirecting paid users back to checkout. Deploy exposes a serverless function timeout at twenty-two seconds.
4:51:02 – 5:54:34
18 · Product 5: multi-API syndication with real publishing
The hardest build. A generative WebGL hero page from a borrowed prompt, a full written spec, then a running updates file so a second model can pick up when tokens run out. Includes a voice profile system, a real OAuth connection to a social platform, an actual published post, scheduling, an API key surface, webhooks, and subscription billing.
5:54:34 – 6:22:06
19 · The economics: moat, pricing, distribution
Why software stopped being a moat and distribution replaced it, the ninety-five percent marketing argument, value-based pricing worked through a numeric example combining expense savings and opportunity cost, how to set three tiers off the top price, and the tradeoffs between outbound, inbound and affiliate distribution.
6:22:06 – 6:23:04
20 · Wrap-up and offer
Closing ask: a paid accountability program with a first-customer-in-90-days refund guarantee, a podcast, and the free resource folder linked in the description.
Lines worth screenshotting.
- Hiring a developer at the level these models now operate at cost twenty to thirty thousand dollars a month a few months ago, and those people worked eight hours a day.
- Eighty percent of security problems in vibe-coded apps come from five things: exposed keys, missing row level security, no server-side validation, hallucinated packages, and missing auth middleware.
- Eighty-three percent of exposed Supabase databases involved a row level security misconfiguration, which is a single button nobody presses.
- Add authentication at the end of a build, not the beginning, or the middleware only ever protects the pages that existed when you added it.
- Attackers publish real malware packages under the names models commonly hallucinate, so a typo in a dependency list is a supply chain attack waiting to happen.
- Run the security audit in a model with zero build context, because the model that wrote the code is biased toward defending it.
- Front-end validation is theatre. Anyone can open inspect element, read your password rules, and enumerate against them.
- The most valuable habit in a long build is writing a running updates file, because you will run out of tokens before the app is finished.
- Split the work by model strength: one plans and audits, the other designs and wires, and never migrate mid-thread without exporting a summary first.
- Judging a model by whether it one-shots something is the wrong test, because silicon can retry ten thousand times faster than a person can once.
- Frameworks raise vibe-coded output quality because the framework's conventions are all over the training data, not because the framework is better.
- Simplicity becomes a moat in a market where every app can bolt on unlimited features for free.
- Software stopped being a moat because there are about to be far more agent-engineers than there ever were human ones. Distribution is what an agent cannot clone.
- Spend roughly five percent of a business's life on building and ninety-five percent on marketing, because anybody can now do the building.
- Price at ten to twenty percent of the value delivered, where value equals direct expense savings plus the revenue unlocked by the time you gave back.
- It is not the first version of your app that makes money, it is the twentieth, and only customers can tell you what the twentieth should contain.
- Outbound pays early and plateaus, inbound pays nothing for a year then compounds, so start with outbound and shift as revenue allows.
Build fast, secure it, then go sell it.
WHAT TO LEARN
Two models steered against each other can produce a live, paid, authenticated app in an afternoon, which means the scarce thing is no longer the code but the five security holes you closed and the customers you found.
02Set up Antigravity and Gemini 3.1 Pro
- Store your standing instructions in a rules file in the workspace so style and quality constraints apply to every request without being restated.
- Always start a new feature in planning mode, then switch to fast mode for one-off mechanical tasks like renaming or reformatting files.
03Add Claude Code inside Antigravity
- Keep each model in its own window rather than routing everything through one chat, so the conversation history and its context stay with the model that built it.
- Judge a subscription on the work it replaces rather than its sticker price, since the comparison here is a developer salary, not another app.
04Product 1: one-shot a landing page and deploy it
- Give the model a full reference screenshot and an explicit archetype instead of a description, because transplanting one navbar from an image is faster than describing it.
- Deploy something publicly on day one so hosting stops being an afterthought and the feedback loop is short while the app is still simple.
05The security 80/20 and the audit prompt
- Treat five failures as the whole checklist: exposed keys, missing row level security, front-end-only validation, hallucinated packages, unprotected routes.
- Keep every secret in an environment file and never in code, because attackers search public front ends for known key prefixes rather than breaking anything.
- Enable row level security on any database before it holds a second user's data, since a public key is public by design and that setting is the only thing separating accounts.
06The build loop and the usual-suspects stack
- Add authentication last so the route protection has full knowledge of every page, rather than covering only what existed when you added it.
- Test against fake local data before touching a database, so functionality bugs and data bugs never arrive at the same time.
- Pick the stack that dominates public code rather than the one you like, because model output quality tracks how much of that framework it was trained on.
07Product 2: plan in one model, build in the other
- Read the generated plan for shape rather than detail, checking only whether the page count and structure match what you asked for.
- Fix functionality first and design second, in separate conversations, so a styling request never rewrites working logic.
08Wire in Supabase: schema, RLS, auth
- Write a checkpoint file describing the current state before any risky step, because a long build will exhaust the context window before it is finished.
- Create the database yourself and hand over only the keys and project identifiers, since provisioning is the one step an agent cannot do for you.
- Manually visit every protected route while logged out, because a redirect that works on four pages and fails on the fifth looks identical from the dashboard.
09Redesign, an AI hero video, and the deploy
- Generate a still image first, then animate it, when you want a hero asset that no competitor can copy from a component library.
- Expect the first production bug to be an environment difference, most often a callback URL still pointing at your local machine.
10Security audit in a fresh context
- Run the security audit in a model that never saw the build, because the model that wrote the code will defend its own decisions.
- Replace detailed error messages with generic ones before launch, since debug output tells an attacker how your database is shaped.
11Hosting and databases from first principles
- Understand that servers do logic and databases only store rows, which is why validation belongs on the server and nowhere else.
- Use a staging step for anything with real users, because the last fraction of a build is where deployment differences surface and the feedback loop is slowest.
- Model any database as a spreadsheet with a header row and a unique key column, and most schema decisions become obvious.
- Choose a fixed-column database unless your records genuinely have different shapes, because filtering consistent data is the common case.
12Languages, frameworks, and version control
- Frameworks exist to make many developers produce similar code, which is exactly why they raise the quality of agent output.
- Push to a repository from the start on anything you might share, since hosts can rebuild automatically on every push once it is connected.
13Run agents in parallel
- Run two or three agents at once, not ten, because context switching costs more than the parallelism returns past that point.
- Build several variants of the same thing simultaneously and keep the best, rather than iterating one version toward an unknown target.
14Product 3: a lead-gen SaaS wrapping a paid scraper
- Sketch the app on paper before prompting, then feed the sketch as an image, because a picture of the navigation carries more than a paragraph describing it.
- Wrapping an existing paid API is a legitimate product, since the interface, the prompt quality and the workflow are what the customer is buying.
- Batch parallel API calls instead of running them one at a time, which is often the difference between a usable tool and an abandoned one.
15Ship it: auth, GitHub, and an auth bypass
- Export a full state summary before switching models mid-build, or the new model repeats every failed path the old one already ruled out.
- Assume the audit will find something real on anything that spends money on the user's behalf, such as a route that runs paid jobs without checking who is asking.
16How payments actually work
- Never handle card details yourself, and let the processor's webhook flip a single field on your user record when a payment lands.
- Pick a billing shape from the cost structure: credits when each action has a real cost, subscription when access is the product.
- Check entitlement immediately before the expensive operation, not at login, because that check is the only thing standing between a free user and your API bill.
17Product 4: a credit-metered image app
- Prove an external API works with a direct request before wiring it into the app, so a failure has one possible cause instead of two.
- Expect serverless functions to be killed at a fixed timeout, which is why work that ran fine locally can fail the moment it goes live.
- Generate several options per request and let the user choose, since one output from an image model is a coin flip and three is a product.
18Product 5: multi-API syndication with real publishing
- Write a running updates file during a long build so any model can resume from a summary instead of re-reading the entire codebase.
- Steer hardest in the first few minutes of a build, because a small wrong assumption at the start compounds into a completely different app.
- A real integration needs its redirect address changed the moment you go live, or your production app will keep sending users to your laptop.
- Fix the writing pattern in the prompt, not the output, since alternating very short and very long sentences is the tell that makes AI text obvious.
19The economics: moat, pricing, distribution
- Software stopped being a defensible advantage, so the thing worth protecting is the audience, the customer list and the relationships around the product.
- Spend roughly nineteen times more effort on distribution than on building, and treat the build as the entry ticket rather than the work.
- Price from the value created, which is what the buyer stops spending plus what they can now earn with the time returned, then take ten to twenty percent.
- Set your top tier first from that value number and step the lower tiers down by reducing the buyer's return, not by guessing at price points.
- Start with outbound because it pays within a month, and shift toward inbound once recurring revenue makes a year of silence survivable.
Terms worth knowing.
- Row level security (RLS)
- A database setting that restricts each row to the user who owns it. Without it, anyone holding the project URL and the public key can read, write and delete every record in the database.
- Environment variable file (.env)
- A local file that holds passwords and API keys as named values. Code references the names instead of the secrets, and the file is excluded from version control so the keys never reach a public repository.
- Server-side validation
- Checking user input on the server rather than in the browser. Browser checks can be read and rewritten by anyone using developer tools, so any rule enforced only in the front end is advisory.
- Authentication middleware
- A layer that intercepts every incoming request and redirects unauthenticated visitors to a login page. Without it, a logged-out visitor can reach a private page just by typing its address.
- Hallucinated package
- A dependency an AI model invents because the name looks plausible. Attackers publish malware under those exact predicted names, so installing one hands over whatever the malware asks for.
- Serverless backend
- Backend code that runs as short-lived functions on a hosting provider rather than on a machine you keep running. Cheap and simple to deploy, but each function is killed after a fixed timeout, often around fifteen to twenty seconds.
- Primary key
- A column whose value is unique for every row, used to identify a single record unambiguously. Without one, a query for a specific record can return several and break whatever expected exactly one.
- NoSQL database
- A database where each record carries its own field structure instead of sharing a fixed set of columns. More flexible for irregular documents, less convenient for filtering and joining consistent data.
- Staging server
- An intermediate environment between your own machine and the live product. It runs on real infrastructure so it surfaces deployment problems before customers see them.
- Webhook
- An automated message a third-party service sends to your server when something happens on their side, such as a payment succeeding. Your server listens at a fixed address and updates its own records in response.
- Entitlement
- The state of a user account being allowed to use a paid feature. After a payment lands, the backend flips a field on that user's record, and the app checks that field before doing anything expensive.
- Context window
- The total amount of text a model can hold in one conversation, including its own internal reasoning. Long builds exhaust it, which is why progress gets written to a file the next model can read.
- Plan mode
- A conversation setting that forces the model to think through and present an approach before touching any files, so a wrong assumption is caught before it becomes a hundred edits.
- MCP server
- A packaged, reusable set of steps that lets an agent talk to an external tool such as a database or a payment provider in a predictable way. Effectively a workflow somebody else already wrote.
- Rules file
- A markdown file in the workspace that the model treats as standing instructions on every request. It is where style guides and design constraints live so they do not have to be restated.
- Value-based pricing
- Setting price from the measured value a product delivers to the buyer rather than from your costs or a competitor's rate. Typically a small percentage of the total value created.
- Opportunity cost value
- The revenue a customer can now earn because your product freed up their time, counted separately from the money it saved them. Usually the larger of the two numbers.
Things they pointed at.
04:37toolGemini 3.1 Pro (High and Low)
13:00toolWispr Flow voice dictation
1:07:10toolNext.js
1:57:08toolVeo 3.1 image-to-video
2:19:00toolExcalidraw (used for every whiteboard sketch)
3:04:22toolAnyMailFinder email enrichment
6:22:37channelThe presenter's AI automation podcast
Lines you could clip.
24:21
“Just a few months ago, in order to hire a developer at the level of Claude Code or Gemini with Antigravity, I would have had to spend $20,000 to $30,000 a month. And those people would work eight hours a day, max. This stuff does 24 hours a day.”
52:31
“83% of exposed Supabase databases involved RLS misconfigurations. That means only 17% of exposed issues were not related directly to this one thing that is basically just a button.”
45:31
“The reality is everything on planet Earth is hackable. It's just a question of how hackable.”
3:12:51
“People judge AI by its ability or inability to do things in one go. Human beings rarely do things in one go either. The difference is silicon thinks about ten thousand times the speed, so you can just try it ten thousand times faster.”
3:32:22
“This is a really good use case of using two different models. The first is to build and the second is to spot check what the first model did without full context.”
4:48:53
“You'll quickly realize that the vast majority of time that you spend on this is not actually the building. It is the giving vibes plus the verifying it works the way your vibes require it working.”
5:56:12
“Over the course of the next five, ten, twenty years, software will no longer be the moat.”
6:02:09
“Without marketing and sales, you have no product. You may think you have a product, but it's not a product. It's just a hobby.”
6:04:15
“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.”
5:53:29
“We used a ton of tokens this time, and I don't actually recommend committing that many tokens to an app. This session was probably at least $70.”
59:49
“Most people that build vibe coded apps will miss one of these five features, and then vibe coding in general gets a really bad name because people just don't secure their stuff.”
6:16:30
“You're in a sea of a billion people and then you're given a megaphone, and you think this is awesome. What you don't realize is every other person also has a megaphone, and the big people have megaphones way bigger than yours.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphoranalogystory
Hey, welcome to the definitive course on vibe coding for beginners. I use Antigravity, Gemini 3 .1 Pro, and CloudCode 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 Antigravity, Gemini, and then CloudCode 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 edge SaaS 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 Cloud Code.
I'll give you guys the best development environment available in probably around 15 minutes. Then we'll build your first vibe -coded 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, because I think it's one thing to build simple portfolio sites and stuff, but if you wanted to push that out to a fully fledged app with authentication databases in the backend. A big issue in vibe coding is security, and I want to make sure that we cover at least the 80 -20 of that.
Then we'll build another product, which will be a client -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, and 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 SaaS app that scrapes, enriches, and then queues up the sending of fully automatic emails.
This is an actual system I use production. After that, we'll do an AI -based SaaS app that uses AI to generate thumbnails. And 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 Cloud Code anytime it starts. veering outside of your recommendations. And then finally, we'll build a content automation SaaS app that repurposes a single piece of content across multiple platforms.
That's another system that I actually use. Before we wrap up, we'll talk about the economics of vibe coding, which is how to price, package, and then sell what you build. And that's important because I find a lot of people watching this are probably going to be doing so not just for their own hobbies, but for financial reasons.
We want to make money with the things that we build. Okay, so I care a lot about making money with this stuff. I want to show you guys how to do that as well.
Hopefully that makes sense. Let's not waste any time. Let's drop in and get started.
Okay, so how do you actually set up anti -gravity? Just head over to antigravity .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'd 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 computing. 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 got a little thing in the top right hand corner here which is antigravity .dmg 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'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, 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 to your Google account, you can also use, you know, Gemini as a model. 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. 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 option command B.
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.
Next, you 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.
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 actually want to explain the ux after i explain the ux i'll also talk about clod code which is the alternative chat window kind of like this little agent chat widget except for the clod 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 your agent chat, your ability to talk to AI. And this is how most integrated development environments are nowadays.
I say most because anti -gravity isn't really technically an IDE. There's a couple of additional features here. But I don't want to be pedantic.
For all intents and purposes, this is an IDE. And this is how it works. So in order for us to see the things on the left -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 pages 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 of that for you, I usually make the left -hand side or the right -hand side way bigger.
A lot of the time I actually just... issue this middle pane entirely actually and then just chat with the agent but i'll i'll show you guys how that works later for now let's learn this On the left hand side here, as you see, this is just a file explorer like anything else, just like a finder on your computer or whatever.
You know, you have the exact same thing here. So, you know, in my case, I'm scrolling through my Mac 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? 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. 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, 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, if I click on this index .html here, you see that I actually have like a website file set up here.
HTML is the ending for websites, basically. And, 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 can write stuff. hey stuff okay um you can also delete files so right click 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 left hand side as basically your average run of the mill file explorer and the stuff in the middle you can almost treat like like notepad on windows or like apple notes in the middle 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 rel thing looks another way but 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, because 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 high level 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 marked down files instead of it looking kind of like doll and drab and you know all this tiny text here if you click on this little button here you 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 my browser and then I'll go to Google Docs. And then what I'll do is 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 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 you can go forward just with this you can go backward with this it's the exact same hotkeys that you use on you know windows or mac to like change tabs and stuff because basically what we're doing is we're just changing tabs so if you're alt tabbing you can alt tab through files like that super easy and then you'll also notice that there's just different types of files depending on what you're looking at.
So we talked about Markdown, this is a dot JSX, this is a dot CSS. This one over here, though, is actually a Gemini specific one called walkthrough, where it runs you through what the AI 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 8020.
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 four seconds ago, I had the letter A. 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.
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 basically a list of every conversation I've ever had with AI. So refining prompt for website generation 40.
minutes ago. This is something that I produced. When you click on that button, it'll say, hey, should we open in the current window or should we open in a new workspace?
So what I'm going to do is I'm going to open in a new workspace, it'll open up a new folder, and now it'll actually pull through my conversation as well as the specific file that I had opened when I did this. In my case, I was preparing a website generator prompt for this course. 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 high level 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 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 high fidelity cinematic one -to -one pixel perfect landing pages. So this is sort of like my high level workspace rule that helps constrain the behavior of the model.
And you know, this is actually pretty long, right? Like you can scroll down this for quite a while. This is one of the reasons why I have pretty good vibe coded quality because I basically put in a lot of style guide and high level 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 then you can just 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 and then you know you can basically specify an activation mode is it always on is it manual do i set it do 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.
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 a dot agent slash rules 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 .md. This Gemini .md is basically just the parent rule that always applies if you have a file called capital Gemini .md in your workspace.
All Gemini models will just always take that as a rule. 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 VibeCoded app. To start with, I want you to reference this document.
This document includes information about all sorts of high ROI security. security practices, revive coded apps. After you're done, I'd like you to go through each of these step by step, make small incremental changes to the code base, try not to 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 dash 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.
So what I'm going to do is I'm going to go back here and I'm just going to delete this. That'll delete the code review customization. Now, there's also some other customizations like MCP servers.
I'm going to talk a little bit more about MCP servers later. But the way I want you to treat MCP servers for now is basically it's just a way to define workflows. It's just 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 PostgreSQL, there's a pre -existing workflow bundle here called CloudSQL for PostgreSQL. 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 servers, so I don't really use them a lot in practice. And we'll cover all that stuff later. For now, I don't want to overwhelm you.
okay next up we have the title of the current folder as you can see this one's just called website dash 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 code context items rules even terminals pre -existing conversations, and then also MCP servers into the context.
And the reason why this is valuable is because, you know, I could just copy everything in this file and paste it in, or I could just say, hey, I want you to reference this Gemini .md, and then it would do the same thing. But as you can see, I'm not really polluting this big window. It's very clear and clean.
After that, you have the mode. Now, there are two conversation modes available to Gemini 3 .1 Pro right now. There's planning and fast.
This may change at a certain point in time, but for now, this is more than enough. In general, you always want to start in planning anytime you're designing or building a new feature. Planning is good because it basically allows the model, or almost forces the model, to do a lot of thinking before it actually stretches its fingers out into 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 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 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, 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 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, you know, basically benchmarks showing you how high quality the models are. It's different things.
Use usually some sort of like graph here that runs through, hey, you know, highs 44 .4 % on this benchmark. Lowe's 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, OpenAI, and then Anthropic. I was all about, you know, Claude Opus 4 .6 just last week. 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. But yeah, this is how you select through a bunch of different models.
And as you can see, it's just like Lego blocks are hot swappable. Gemini three flash is super, super quick.
Sonnet 4 .6 is a really long context window. A lot of these have pros and cons. Nobody really uses this in practice, though.
Okay, and then finally, you can click this button to replace your texting with basically talking. So what I'm doing now is I'm just having a normal conversation with it. When I press this button, you know, and then I send it.
Gemini has a built -in 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 is because on average people speak much faster than they write. If I'm writing at 50 to 80 words per minute, I can speak at like 150 to 200 words per minute.
So it's obviously a lot faster and a lot quicker. Now that I've actually sent a message, you could see how the UX has changed a little bit. We now have a thought little tab.
This basically runs you through the internal thoughts of the model. The reason why they make this present and visible to you is because if it's making any sort of like egregious error, you can just quickly dive in and say, OK, so why did it make that error? This gives you some transparency, some accountability, and then you can, I don't know, adjust your future 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 make sure that the internal thing is not. 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 the response. And so in this case, to get started on building your 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 high -level workflow rule, or sorry, just rule in Gemini .md.
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 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, 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. 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 have opened up here.
On the left hand side, there's changes overview. If your request changed any files, you know, on your work inside of your folder, that's actually gonna 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.
Next up is terminal. So sometimes Gemini or other models will launch terminal instances for you. 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 inside of Gemini nowadays.
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 we're going to keep it. were now opened on the anti -gravity docs page for browser.
And so you know how some things in life you can only really do on a browser? You can't just do everything via API or you can't do everything like through a chat window. This is basically a quick and easy way that allows you to do that.
And I'm not going to say that this is like super, super valuable or really, really all that helpful right now, but you know, it's pretty cool. And obviously they're trying to push more towards browser automation. Okay, so hopefully you guys now know everything about how to use anti -gravity and then the Gemini series of models.
What I want to do next is I just want to give you guys a quick run through of Claude code because we're also going to be using that. Basically, the Claude large language model lives within the Claude code chat software, which we also wrap inside of anti -gravity. And so just the exact same thing that we just did with the agent chat, we can do with the Claude code chat as well.
So what I'm going to do next, I'm actually going to exit out of this view. 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 you can enter some information here and then continue with your email.
I don't actually have an email called astfastfastf at gmail .com. If I would, I'd probably be a billionaire. Basically, what will 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 Cloud 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 Cloud 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. Google, sorry, allows you to use Gemini for free, despite not having to pay any money. But then you have quite limited usage.
Just 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, 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 cloud code. I'm not pushing any specific product on you in this course. I will just say that I, as a business owner, you know, I get a tremendous return on investment from this stuff.
Just a few months ago, in order to hire a developer at the level of Claude 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.
This stuff does 24 hours a day. This stuff you can plug into 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. 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 Cloud. Once you're done signing up, what'll happen is we can go back to anti -gravity, go to this bottom left -hand tab here called Extensions, and then click Cloud Code for VS Code. Now what this is is just like the agent chat on the right -hand side is the way to communicate with the Gemini series of models.
This is built by Google. Okay. This is built by Anthropic and it's just a little extension chat that you can put into, into 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 clod 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 slash login. Okay. That'll allow you to log in to your Cloud AI subscription, which you just put together a moment ago.
You can also sign in through the Anthropic console or these other third -party 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 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. For whatever reason, I guess just because of the nature of their business arrangement, inside of the agent chat and anti -gravity, Google actually allows you to communicate with the cloud 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 cloud chat. So what I typically do is I just communicate with the cloud series of models and cloud 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. 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 Gemini, we had a few modes like planning and so on and so forth. In this one, we have ask for edits, edit automatically, plan mode, and then also bypass permissions.
Most Gemini is automatically set to bypass permissions now, so you don't actually have to manually set it. Ask before edit is just where if you want to change the pre -existing files on the left -hand side, you need to just verify with me first. So if I say change readme .md to include a snippet about Nick Sarayev.
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 NixRef, 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 can allow all edits this session, and then 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 that actually haven't like do that little, you know, hey, should I change this? 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, 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 Sarayev. I'm a software. engineer and automation consultant specializing in AI power 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 anti -gravity works in conjunction with Claude code and then the Claude series of models. And you also understand the interface, at least the 80, 20 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 high quality, 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 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 dash demo with the Gemini .md 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 high -fidelity cinematic one -to -one 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 this 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, as well as some double checking protocol down here.
And on the right hand side, as you can see, after I entered that little message, it's now asking me for the brand name, the core thesis, 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 and 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 my brand name, just so people are all on the same page as me, is called Left Click.
And basically what we are. Zoom way in there because the website looks like trash right now. This is for the definitive AI growth partner for fast moving B2B companies.
This is a website that actually had a real developer. Like I paid somebody money to put this together for me because 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, 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 Hormozy and ovens over here. That's won me some goodwill for sure. basically what i want to do is i just want to have ai try and generate this website instead of me and then i just want to compare and contrast the results you'll see there's some mild things here like there's a cool little animation that kind of follows my mouse around that's kind of neat right obviously the text and the fonts and stuff that those are very sexy so do you think ai could do as good of a job well let's find out i'm going to answer some information here brand name is called left click we help high growth b2b companies scale revenue using outbound methods like cold email to pick best fit three pick best fit four super low cost of acquiring a customer 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 min 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 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've done something that requires a fair amount of planning, it'll actually pop open a planning section.
And this basically runs through the files that were edited, as we saw earlier. 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 left -click 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.
That'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, 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. 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 the task and the other is 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? It's writing hundreds, thousands of words basically every few seconds.
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 is doing underneath, 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 aesthetic and typology decisions like B2B SAS, Dense, we want Gun Metal, Safety Orange, Steel.
The typography is going to be IBM Plex Sans, IBM Plex Mono, right? These different fonts and so on and so forth. The application shell is going to look like this.
The proposed changes are going to look like that. As you saw a moment ago, we just added a file to our folder called left click dash dashboard. 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'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 shepherding 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. OK, 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. Oh, I love that button.
That's really nice. 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 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, you know, sections here, rapid revenue, lowest cost proven vendor. That's really cool. We focus on systemic growth.
I like that. I like the blue this time. We got some cool animations and stuff like that.
You will find, you know, because we're using the same icon libraries and stuff, some of these animations will be pretty similar if you redo this five or six times. But yeah, I mean, like we just we just one shot at a really cool website, right? I'm just going to do the same thing now a couple of times just to show you guys that you don't have to stick just to the style.
You could do it in a bunch of different ones, too, if you wanted to. OK, so I'm just going to open up a new folder here and then I'm 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 left click 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 architects for multi -billion dollar portfolios kind of really like that section too much here header is probably the weakest bit though this stuff looks really cool like i really like this look at that This looks nice as well.
You know, it's like something that came up with to showcase how we were verifying decision maker profiles were 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 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 don't really like, I don't know, I just don't really like the layout here. I think personally, the nav bar 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 nav bar from something else. And I'm just going to include a screenshot.
So like this nav bar is actually really cool, right? Like this, this is clean. So why don't I just take this nav bar 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 nav bar 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 a left click.
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 hyper efficient acquisition graph. They're outside of the bounds of that little box.
So let's fix that up. Let's add another section between scale without compromise and trusted by the best that just talks about me. My name is Nick Sarai.
If I run left click, I've helped, I don't know, over 400, 500 ,000 people now use AI automation and then outbound methods to improve their lives and their businesses. You can do a quick little Google about me as well if you want. And then down at the bottom, 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. Okay, I'm just going to dump that right here. So boom, let's just remove that.
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 pumped all this stuff inside. 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 for my content writing business.
One second copy. So I like this. This is really clean.
We then have that little pill up top with similar three card design here with some text. That's neat. 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 were waiting for the other left -click 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. Ooh, 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 nav bar 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 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.
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.
I'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.
What I like is when I load it, there's that little bubble that goes out. You know, it expands at scale. 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 lightly darker green. And yeah, I mean, like, you know, is this again going to win any awards?
Probably not, especially since website designs are 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 hundredth of the time it would have taken you to do websites the old school way. And I know that because 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 with vibe coding.
So basically what you're going to need is you're going to need a hosting provider. Now I use Netlify because it's simple. It's free for a couple of sites anyway, but you can also use Vercel.
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 link is here that I'm opening up, and then it takes the static files on your computer that you're currently accessing at localhost5173. And then it just like puts them on a web accessible URL. So we're going to have something like gentle beaver.
.netlify .com. And we don't need to spend any money in order to get that done. It's completely free for us.
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 netlify .com. 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 that I've hosted on Netlify before, right? So make money with make, reply robot, left click, go one second copies.
You could see I've had quite a few startups that have failed. And what I'm going to do now is I'm just going to click Add New Project. And then, you know, I'm going to click Deploy Manually.
And then I can just drag and drop my project folder here. So simply put, I'm going to go back to my anti -gravity. And then what I want is I just want to right -click this and say Reveal in 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 of 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 one -shot it. If it does, I'd be quite surprised. Wow, that's so funny.
It just did. 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 Salmiakki. 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 a hundred percent 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 a Nick Sarayev and today I'm going to show you how to get a website up.
on the internet 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 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 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. But hopefully you guys see how easy it is to one shot a website with Gemini 3 .1 Pro.
Cool. So that's how to design a website. The issue with websites is websites are really simple.
They have no authentication. They have pretty cool UX, as you can see, and you can get progressively more complicated as the models get smarter. But there's no actual security or data transmission that's really required.
There's no interactivity. So when we migrate from websites to apps, what we need to do is we need to understand a couple of things about security. And if we don't understand things about security, what will 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 Clawbot is what it was called before its 40th rebrand.
And the reason why, part of the reason why I rebranded 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. 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 woes 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 80 -20ing security is just to 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.
If you just like do some 80 -20, 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 low hanging fruit. Okay, so I just want to run through the 80 -20 here. 80 % of security problems in vibe coded apps will come from five things.
The first is exposed environment variables and API keys. The second is missing or broken row -level 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, 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. When you set up an app, you just tell Gemini 3 .1 Pro High or, you know, Cloud, 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 hit the 80 -20.
You literally just create one prompt, and then you just feed it in as sort of like a post -build 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 that feel 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 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 vibe coded apps is a lot of people with their agents actually hard code authentication tokens and secrets and environment variables into their code and the way that i see it is this is kind of like like you see in a lot of like older school cubicles where it's like gmail password one two three one two three nick is super sexy dot com whatever and like anybody that walks by will see that and they will know your password It's kind of like that with 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 hardcoded mentions of a specific string like next underscore public underscore, you know, whatever key or secret key or whatever. 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 when you press inspect. And 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 because my fat head is in the way. You guys see how down here I just command F to 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 exposing your credentials is basically.
A lot of the time, somewhere on the front end, people write code so that when you click the map growth button up here, which we just found down over here, 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 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 what we want 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 We also want to avoid the location 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 you'd be surprised at how many really like high profile libraries that's happened. That's one of the issues that I've had with. 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.
Because what do we do instead? Well, basically, you put them in a file like a dot env. 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 do is somewhere in the core of this, you go dot env, then you'd have next public key, and then it would look like this. And then no, no, no, like, 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 anthropic key.
And 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 code base, it would do like a command F through the entire thing. It'd look for something like anthropic key or something like that. And then it would go and it would actually find that it's 3IF4.
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 a .env.
Another benefit is you usually don't push .env keys to like a repository on the internet. Normally you just keep that locally in 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 row level security.
So 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 Supabase. It's very, very popular with most vibe coded projects right now. And basically, it's like the single most important security feature on planet Earth.
But, 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 Supabase 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 stupid base works by default.
And so some very popular vibe coded projects here did not have real level security. And basically anybody that signed up for them was given a key sort of like a password. And 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, you know, that ended up with people's ability to delete rows in database, which is stupid.
All RLS says 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. But if you just turn this on, it affects like 90 % of errors, okay? So 83 % of exposed super -based databases involved RLS misconfigurations.
83%, that means like only 17 % of exposed super -based 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 low hanging fruit.
Next is something called server side validation. And a big problem with that is like, you know how we just developed a website, right? Well, let's say on our website, there was some form and the form was, I don't know, it was like a signup 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 signup mechanism, what we kind of have to do is we have to check to see, does the email already exist 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, when you do this sort of front -end validation where you validate all of the logic on your website, it's a 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.
I could go to google .com and then I could hold command shift C or right -click 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, I don't know, this input class, which is called Google search.
And I could change it to Nick search. And now I've just changed Google's website, right? Accordingly, what I could also do is if there's some form here, when I put my information in that does my email or whatever, I could actually like have it go through.
a bunch of email addresses or a bunch of passwords and then it would change the email and password that is being done the valid accordingly if i had a forum and this forum you know was like checking emails or checking passwords or something i could actually go through and then i could like see the data see the function that is actually doing the checking and then i could like look at it and i could be like wow so the logic that that guy is using to check if passwords exist is he's checking to see if it's over uh i don't know three characters and the maximum password length is 10 characters that means that uh you know i could theoretically enumerate through all passwords between three and 10 characters, and then I'd be able to find out anybody's password.
You know, it's like, this just gives attackers way too much information. Likewise, it also allows them to do things like, you know, if 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. 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 but you know the server is like super password gated 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 server -side validated? Okay, we'll make it server -side validated.
And that takes me to number four, which is dependency and package security. 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 coding projects nowadays, you have like a node underscore modules folder or something. And these are all the services that this... repository is using in order to like build my website.
And so it's using Witch, WordWrap, Zod, YoctoQ, Prelude, PunyCode, React, and so on and so forth. And so as you can see, like most websites nowadays are actually like very, very heavily based on pre -existing libraries that other people have built, which kind of makes sense because 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 stats and stuff like that have like done a lot of this to see you know what libraries the am 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. And the AI's 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 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. In case you've ever accessed like an authenticated service before, typically the way that it works is you'll have some things.
So I'm just going to open up a new thing and I'll go clod .ai, I don't know, slash new. When I click on this, do you notice how it just immediately jumped me back to slash login? clod .ai slash new is like how you make a new thread, right?
Well, there are some apps out there where you'll pump in like clod .ai slash, I don't know, maybe chat or something like that. OK, and then basically you'll be able to, 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 log in. 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, OK, like settings and general and new and chat, it just knows that, OK, 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. 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 calls and stuff like that. So you can fix this by just ensuring middleware secures all routes. Okay, so like I didn't want to make this little module here because it's boring as hell.
But just know that... you know, most people that build vibe coded apps will miss one of these five features. And then vibe coding in general just gets a really bad name because people just don't secure their shit, right?
The reality is like nothing is 100 % secure, as I said, but if you just do these five things, and then, you know, ask your AI models to fix them, 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 row level 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. And 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.
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. But still, you know, it's a reasonable way for us to at least run through this.
And now Gemini 3 .1 Pro High, and I always recommend using the smartest model for this stuff, is now just going to like take this prompt, pump through literally everything, and then just say like, hey, this is good. Hey, this is bad. Hey, this is good.
Hey, this is bad. And then we're going to secure it by basically just saying, okay, fix everything that's bad. Okay, now it's given us a big returned checklist.
It's saying that the code base is a classic static front end. Here's the systematic audit, no hardcoded secrets, no API keys, and so on and so forth. No git ignore, which is something that they typically recommend to prevent you pushing your .env.
No console log statements, you know, a bunch of things. And it looks like, you know, we didn't actually have... anything 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. Because this isn't an app with any authentication, right? So it's just like a website.
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 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'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 that people typically forget it. But, you know, this is an 80 -20 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, then 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 update ESLint and resolve all four high severity mini match vulnerabilities, which is cool.
So yeah, looks like we are now solid. Let's move on to something a little more interesting, which is taking everything that we now know about how to build a beautiful front end, and then how to do security audits and stuff like that, and then combine it into a full stack app. So next up, we're going to build a fully fledged SaaS app.
The app that I want to build today is a client dashboard platform for a hypothetical content writing company. And so like any typical client dashboard, we're going to want to be able to create orders, 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 a nice sexy landing page just to tie it all together and then I'm going to push it live to production as well just so you guys can 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 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 be -all.
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, you'll save yourself a fair amount of time later on, just in terms of like the design and then also security.
Because as I talked about in the security module, there's a fair amount that goes into designing like a well -secured app. So the way that this works in general is we start with some sort of inspiration design. And so there are a variety of different places you can go to for these.
inspiration designs but in general i like going to this website here dribble with three b's i like going to this one called godly dot 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 all nice and pretty, 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 elements. It's crazy stuff. So somebody that's like been doing a fair amount of design, I got paid for design.
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 the ability to like replicate designs and have high end designs really, really easy, you know, you need a way to stand out. And so the way that people are standing out now is through animations, through like kind of videos that are playing.
The idea being that, you know, I still can't make video based stuff super, super high quality. So you could still stand out as like human created content or designs with something like that. I'm going to show you guys how to do that anyway.
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 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 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 without a database.
So we're just going to do all the file and data and stuff like that in a .json. And then we'll just test it all locally and 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 Supabase. I'll talk about that in a sec. But then 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 doing auth at the end is way better than doing auth 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 auth first, then you'll make the pages and then the auth will only secure the first page that you do. So instead, we're just going to do our auth at the end. And then the model will already have all the context to like produce, you know, good authentication middleware for all the pages.
And then at the very, very end, we're going to deploy. And then obviously, the issue with, you know, testing back here when it's sort of on your machine and then deploying is like you need to test it again.
So we're going to do some end -to -end tests. We're going to do some miscellaneous designs and I'll probably just throw in the landing page there since obviously the landing page doesn't really have much functionality to speak out. And 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.
You can do some video animations if necessary. Main functionality, local testing, database testing, off deployment and end tests, and then landing page. Then my inspiration design, animate, and so on and so on and so on and so forth.
So I do this on basically all my vibe coded apps and yeah, it works pretty well. So the common vibe coding stack, which I'm just calling the usual suspects here, are going to be a combination of Next .js for the front end, a Supabase for the database and the auth, and then some sort of serverless backend, which in our case is going to be Netlify, but you can use Netlify, Vercel, 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, 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 is the front end and um there's already different front -end languages right i mean like html's hypertext markup language it's usually used to create the structure of the page you have css which is on cascading style sheets 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 We'll use JavaScript and TypeScript.
And there's all these different languages, right? Well, basically what happens is 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 front -end frameworks. Well, not even just a front -end framework. Next .js is technically also like a full -stack framework.
But they made frameworks which just encapsulate all three of these into this thing, next .js. And so what this is, is basically a full way to manage your HTML, CSS, your JavaScript, all these other programming languages, and then they build it in a very opinionated way that consistently produces similar outcomes and 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 things aren't standardized, there's like a million billion different ways that an AM model could make a site. And because usually there's a lot less supervision when you're vibe coding than, 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. both to economize your work, but also just to make sites predictable. If you ever hand them off to anybody, if you're doing this for clients and stuff like that, you know, Next .js is the way to go.
Okay, so that's the front end. You know, Supabase 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. 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 because it's always changing.
What we do is we're going to pull from a database and then use that to actually go and change features. Obviously, we're going to need a login screen with a little user portal and then a little password portal. Let's round that off so it quits looking phallic.
super base is going to help us with that as well and then finally you need what's like called a back -end which is basically just like a server and this server is actually going to manage the interactions between our database our front -end our auth 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 next .js super base and then some sort of what's called serverless back -end okay So we could go into that or we could just build it and I'd much rather just build it and then you guys could learn through the doing.
So let's start with the very first step, which is finding an inspiration design. And I'm going to immediately jump on Dribbble for that. So Dribbble, 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 initially meant to be like a way for designers to create a portfolio and show off their 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 Dribbble, but we'll see. And in our case, what we're looking for is we're looking for some sort of 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.
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 why don't I open up? No, I don't really like that one.
That one's kind of dumb. This one here looks cool. Okay.
And as you can see, you know, I now have like a list of, in this case, all clients on the left -hand side, you know, this sort of like nice gray pattern. And that's, that's kind of cool. I don't really like this one a ton though.
So I'm just going to keep looking until I find one that I really, really like. What you'll find is a lot of these are now videos as well. And there are a couple of 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. 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 gonna use this and basically what we're gonna do is I'm going to create a screenshot of this and then I'm gonna use the model to try and replicate this as closely as humanly possible. And I have a prompt set up that I'm gonna send it to and stuff like that. And then from this, we're gonna get like a really high quality design.
And then I think I'm also gonna do the same thing for the landing page. You know, this design is different from this design. But, 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.
I guess this is sans serif, but I really like this font. So, yeah, let's let's give it a go. So what I'm going to do first is I'm going to head over to anti -gravity.
OK, 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 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 .1 Pro is awesome. But personally, I find that actual 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 plan mode here.
If you just keep on cycling through, eventually you'll get to it. It's the one with the little pause sign. And then I 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 Dribbble. We'd like to build a full -stack SaaS client dashboard app for our content writing business. It's very important that you get this right.
Our career depends on it. There's a little hack that I picked up from... I think it was like a former open AI dev or something.
But they found that when you make it really, really important, like our career depends on it, the output quality actually goes up just by a few percentage points, nothing major. And my prompt is not winning any awards here. So 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 high quality, 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 SaaS app like this would include. The dashboard SaaS app should use super base.
I said super base here. What I meant to say was super base, 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 Netlify. 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 auth and DB with Supabase. Then we'll make a landing page, and finally we'll do an end -to -end sweep to ensure everything works, including auth, 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?
I put the tech stack and it looks like it corrected my little issue there with super base. 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 greenfield 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. What I've done is I've enabled this thing called fast mode just because Opus 4 .6 supports it. And that allows it to go two and a half times faster approximately for I think like 3x the price.
So a little bit of an arbitrage there. 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 basically what I want to do is I want it 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 thing is super comprehensively planned, then I can just pass all this stuff to Gemini with the screenshots.
But sometimes cloud 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 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 text app.
Here's the phase one project setup and UI shell. And 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 us to do? And so what I'm seeing is there'll be like an app. page.
There'll be 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 and local data.
So after that, we'll define some types. 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? Dashboard, orders.
No, I think this is fine. After that, we have the super base off. So here I'll like set up the super base, but that's okay.
That's not for now. It's later. We 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, this whole thing that this just created for me. I'm going to paste it into this now.
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, you know, on a Mac, you can command shift control. So command shift control four, 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 Cloud 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, 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 going to 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 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 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 gonna go grab a coffee and i'll be right back okay so now it's telling me it's now completed the phase two 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 open 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, I guess, concept of errors, when you create a full -fledged SaaS 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 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.
It 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 to 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, stuff like that.
And that's okay. Basically what you do, 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. Have you guys seen like the, you know, mining meme where you're like mining for gold?
Okay. Basically you're in a cave and every single time you run the thing, you're like this fella here. You just get a little bit further and a little bit further.
and a little bit further and you know this fella 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 any problems and then just giving it directly to the model until we get to that little gold gem.
Once we're here, we can actually start making real changes to our app. And all of that is reasonably well expected. Okay, speaking of which, it just modified some of the CSS after I sent out this message.
And as you can see, we now have a little dashboard setup, 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 Five things, SaaS 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. 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 gonna say, this is an example, new order, content type landing page.
Hey, I wanna build a really cool, sleek, sexy landing page. And then 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, or at least the weekly digest isn't. But that might be intentional just because we don't have access to some sort of email. But yeah, I mean, like, to be honest, like the core functionality, 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. Core functionality is done. We basically have like a, I want to say a rest API, but we have like a little crud app here.
We can create, we can read. I don't actually know if we can update. It doesn't look like we can go to the specific order page to update yet.
So maybe I'll make a note of that. 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.
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 doing the stylistic upgrade, I will 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 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 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 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 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 the text that says orders the top left hand corner is very similar to the background color so that's annoying.
I'd like some sort of graph on the main dashboard page because right now I don't have any. I'd like a way on the dashboard page to click into the recent orders as well. 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 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 in 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 next JS 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 left -hand corner either.
This is quite a promising start. We just have a few adjustments that we have to make 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 gonna 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 that 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 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 the design. And then it can just go into the style sheets and stuff like that and 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 last time, 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 gonna 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. Everything there looks fine. Oh, you know, I think there's one thing I forgot to point out, which is this notifications button.
I think that's gonna be okay, because we're probably just gonna 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 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 gonna 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 or they could see it all Hey, I'm noticing there's like a start work button.
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, those are taken care of.
Okay, cool. We got that last change here and it looks like everything is now super clean. No major issues whatsoever.
If I click on this button, we only have read -only access. Essentially, clients can't make any changes. They can only download stuff and the agency 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, where I'm going to find a really high quality pre -existing design.
And then I'm going to have Gemini basically go through and then modify this to match. And the idea is it should be able to modify this to basically be like almost pixel perfect. We're just going to like change the fonts and stuff like that.
OK, so I'm going to go through Dribbble again. And I mean, I like this idea of like a light mode dashboard. I really do.
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 oh 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 gonna go back to gemini i'm gonna 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 style sheets that you're currently using to build this. In short, I think the design right now is very basic and super simple.
I want you to add significantly more complexity using things like cool mouseover effects on navbar elements on the left hand side. I want you to add really high quality 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, 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 giving 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 just as a start point i'll modify the design slightly afterwards but try and really nail the font colors try and mimic the font styles try and mimic the 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.
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 avatar up top. Cool. My tasks are still the same.
When I click this button, you see we do have that higher quality design, which is nice. and nothing pops up for calendar nothing pops up for reports nothing pops up for portfolio nothing pops up for these buttons neither does it pop up for those buttons let me just check the bottom okay and then yeah the settings work so basically it's just populated this with a bunch of additional buttons that we don't need i'm just going to tell it to remove all the stuff that we don't need and then i'm also going to have it adjust the font a little bit because 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 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 veto 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.
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 read is 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...
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 because my fat head's in the way i have the settings page which is pretty neat And then, yeah, we also have the ability to search tasks up here, which is really, really cool.
I could type SAS growth guide, and then that's 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 .md 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 context. 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 with a 200 ,000 context window, they have a 1 million context window option as well. Whether it's Gemini 3 .1 Pro High, I think it has a 200K context window, it might have a million.
The point I'm making is a lot of that context is just used up by the internal thinking of the model as it does tasks, right? 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 .md file which uh you know in my case is just a very high level 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 just sort of like my fallback we can do is we can 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 Supabase as our database. Walk me through everything I need to do.
In case you guys didn't know, Supabase being our database, 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 Supabase project up here, set up the Supabase 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 Supabase, so I can just click that button and then boom, it's done, right? They own the freaking domain name database .new. They get a lot of this, right?
And they've streamlined the setup to match. But if you don't already have a Supabase account, just open up an incognito window and then just go to supabase .com. and then just click start your project in the top right hand corner and then just enter your information down over here email password you can continue with github sso whatever and just make an account now they're fantastic this is like a really really solid app and it simplified the development of like vibe coded sites 100x over so once you're done with that sign up 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 super base super base 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 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 and we're going to have it do the rest of this for us.
And then cool. It looks like this is going to take care of that. That's going to take care of that.
database schema oh sorry we need to take care of the database scheme 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 it will have edited and dot env 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 Supabase auth, 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, and then it's told us to go over here to SQL editor and then paste this giant file in. 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 this stuff in and then just press run. So that's what I'm going to do.
This will basically create us a bunch of tables and whatnot in our database. So if we go to database now, we're going to have a bunch of different tables and they're all going to connect in a specific way. And this has now taken 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 we're going to get that because sometimes we have issues receiving emails. Let me just pump over to my own Gmail real quick. Okay, yeah, it looks like we did.
So I can now confirm my mail. um that's taken us to i think like this hastily putting together a landing page which is not actually the page that we want so i'm gonna click sign in and then i think my email was this i'm not entirely sure and then my password was that let's click sign in okay cool yeah we actually did sign in that's wonderful um perfect now we have this dashboard which is kind of neat my tasks cool we can click new task now we can create a new content order so i'm gonna go example content order make xyz cool and then we may have to change the order options here too because 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 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 the new orders page. It looks like...
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 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 sign in 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 so just made some additional changes i'm just going to head over to new task i'll say five ways to increase xyz see on 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.
Must be some problem. Okay, and I'm just retesting this now. Create new content order, blah, blah, and click save.
And it looks like we actually got it in. There is still some fake assignees, I think. So 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. It looks really nice.
And then we have some really nice formatted stuff in 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? And 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? 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 left -hand corner, I click log out. Okay.
Now I'm back to the client dashboard, which is nice. 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. 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 sign in pages, sign up pages and the landing pages. I'm going to make the landing page really sexy just to wow you.
And then. Yeah, 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 slash dashboard?
Nice. How about if I go orders new? How about if I go settings?
How about if I go, what else did we have? Notifications? Maybe notifications.
Nice. So it looks like our auth middleware is pretty good right now. 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 round out 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 Dribbble and then I'm going to find a really nice high quality. 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 best thing ever.
This is really neat. Elevate your trading experience, liquid brokers. I think I'm probably going to want a white mode thing though, like a light mode as opposed to a dark mode.
Because if I go dark mode, it'll just seem kind of weird. So I think what I'll do is the 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 gonna 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 in the center. You could just use some plain text for that. You don't need images.
I want a relatively long landing page here with sections for product, sections for pricing hypothetically. 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. I'll show you what I mean here.
But basically, I just want some sort of asset. Let me see. What can we get from Dribbble that looks really clean?
Because for that, I'm going to go over to Dribbble and go 3D shape. 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. Organic 3D shapes over here. This is cool.
Round egg 3D shapes. That's kind of neat. I feel like this would be nice if we could get a white background on it.
So let me give this a try. What I'm going to do is I'm going to take an image of this. Then I'll go over to Google VO.
Actually, sorry. Why don't we just start with nano banana? so i'll go to aistudio .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 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 and also 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 3 .4 which is 3 wide and then 4 high. And we're going to go 2k for the resolution and press enter. Okay just ran out of tokens so I had to go to a different account here.
But it's important that the aspect ratio is 3 .4 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 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 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 by 16.
Just copy this image and then go back here. Paste this in. So I just downloaded.
Okay. And then I'll say rotate this slowly. I think six seconds is probably fine.
So that the last frame is like the first frame.
Perfect. 100 % white background. Okay.
I'm going to press enter. And now VO 3 .1 is generating me a 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 .mp4 okay and then i initially said url but i guess what i really meant was like inside of my folder public slash hero header video .mp4 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'd look a lot sexier. I'm partial. I mean, I might play around with it a bit.
We got the logos down here, sign in button, top right hand corner. That's nice. I think we just need to align 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.
I'm loving the colors. Something with the graph under the why they prefer task veto 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 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 Task Beto to Content Hamster as well.
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 SaaS app.
So I should cut. akshat mawara 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 on 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 it'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.
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 as it's actually being developed in real time.
You can see we changed the name to Content Hamster. Kind of silly, but whatever. This has now done everything perfectly with left -hand side margin matchup, 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 what i'm going to do now is i'm just going to match all of the colors to this because i just love the way that that looks uh i'm just gonna take a screenshot here and then i'll say color finder online and i'm just gonna 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.
And let's go a little lighter here.
We'll go this dark darkest cool And now it's gonna go through the entire app and just change it to reflect like the background colors of this Which I think you're gonna be really cool um obviously i don't want you know us not to be able to see the text so i'm just going to be around like you know if this is that color it'll seem kind of weird right now we obviously have a cool purple thing going on with all the highlighted text being purple and then these things being purple i do think it would just match really really nicely and seamlessly if we had that so we'll give that a try all right this is looking way better i'm loving how the baby blues actually reflect what's going on here let's click try out for free 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. 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 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 video, the border. 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. 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. 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.
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. You know, the look of the little bubbles here goes up. I mean, this is basically exactly what we wanted.
Also change the name to content wheel, obviously. So why don't we now sign up? I'm going to go Nick Sarayev.
We'll call myself left click ink. We'll just use a slightly different email this time just so we could retest the sign up. Let me just make sure this is a simple ass password.
That'll always be the same. Cool. we're gonna click sign up now account created successfully please check your email to confirm your account i'm now gonna 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 gonna 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 gonna zoom in a bit so you 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 style's 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 is currently working on it. You'll see it when it's ready.
Inbox. Cool. Awesome.
I mean, this looks pretty solid to me. I don't see any major issues. We'll go to settings.
We can update things. I don't know if this got saved, that little left click 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 minor changes before we deploy. Hey, it doesn't look like the company. Okay, and then after a full end -to -end check, this website and app is now ready to be pushed and actually deployed.
That deployment is going to occur on Netlify, 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 Netlify. In order to do that, we're going to use Netlify CLI and then give the vast majority of the work to the model. Netlify 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 Netlify API, which is like their little application programming interface, the way that you do various actions on Netlify 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 Netlify. We've gone through the whole build. We've gone through phase one, two, super base, you know, phase three.
And now what we're doing is we're doing this final production deployment. And this is, you know, just 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 links but this has some back and forth and that's what's important so as we scroll up here we could 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 And now it's going through the installation process for the actual Netlify CLI, which is a little package.
And now it's going to communicate with the Netlify 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, 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 give it a new terminal tab, which is what it's asking for. You can do that by going control shift.
a tilde, I think it's called. It's like that little thing in like the top left -hand corner. It looks kind of like this.
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 Netlify 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, 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 one -shot this because we are using a pretty standardized framework called Next .js. 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.
OK, 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 dot JSON file.
And it looks like the reason why we're getting that is notice the URL up here. The URL is not actually the publicly accessible URL. It's this local host 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 Next .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 gonna just take this to my agent and I'll see what the agent says.
We have to go back into our super base 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 callback 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 super base and make some minor changes and then it's going to tell us to update our super base 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 in the top left And then it's either going to be an email or somewhere else.
We can actually turn off the confirmation completely. This is the email that Supabase sends them. That's why it looks a specific way.
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 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. I'm just going to paste that in.
And I'm going to remove that back. So now this is going to be the URL that it basically redirects us to on Supabase's side, because Supabase handles the signups and stuff like that. And now I go back to the app.
I don't even have to actually make any major changes. I don't have to rebuild the app or anything. 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 left hand corner, but I'm no longer going to localhost. And you can see if I click on this, it takes me to content orb dash dashboard dot Netlify dot app slash login.
So here I can actually 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 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 could change that well i write this save give this a refresh Yeah, it 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, because 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. OK, 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. We don't actually have the ability to... We don't have any people on our team, but obviously we could have added some, which is why we still have those little fake Notion -esque people there.
I wonder where they're getting those images from. That's kind of cool. Okay, so we have dashboard.
I think we checked settings as well. Yep, that looks pretty good. i think every other toggle here probably works let me just try searching the tasks so i'll just go oh h okay so yeah clearly it's just searching based off the letters if i type in new order if i type in old order then it won't be okay cool so if we had 20 in here you know that might actually be useful and let me just check the sign in page okay cool so we're immediately being logged in when we click the sign up page and then you guys can't see this from the bottom left corner i'm just gonna click log out and see what happens Because when you click log out, it takes you straight back to the login page, which is the desired expected behavior.
And then nothing is pre -filled. 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, I think, and then slash new. And then there's also notifications. So notice how none of these are automatically signing in, which means some of our auth is fine.
And, you know, all of our animations and stuff like that look really clean and there are no problems on that end. OK, and then I'm just going to do a final spot check, because although I told it to, 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. 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 underneath the what's 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 netlify the A 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 Netlify, have Netlify do the build, and because Netlify is sort of doing free server space, it takes longer.
And then we actually have to go online and then take a peek at the website. But anyway, I'm 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.
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. 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 quad code for this instead of Gemini.
And the reason why I'm doing it is because I don't want any context. I basically want the model to look at this entire code base as if it's new, fresh, and not mine, like somebody else's. And I want it to run through this whole checklist end -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 Cloud Code instead.
And then what I'm going to do is I'm going to paste this in. And then I'm going to say, don't make any changes. I just want the audit.
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.
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. 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 a Zard hex code. And 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 code base. 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? In addition, I just think Claude is a little bit better at security -based stuff right now.
Okay, so I'm reading through everything here. It looks like most of our audits are correct. We do do console .error calls, which is important.
This is basically a way to minimize the attack surface 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 because we don't actually include the files in the code base, but that's okay. We are actually good on RLS. 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 previously. So we could have Claude connect to our Supabase 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 auth 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 OK on most things, we're still missing some some things there. So I'll say excellent. Execute all of the changes.
OK, so I'll say the SQL stuff was already taken care of. RLS etc. 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 fixes systematically for me. And just to give you guys some more visibility in the security side of things, previously we had a line in our code that said if there's an error, we actually add all of the Supabase insert error details here.
This actually just gives a bunch of information about the way that our Supabase database is configured. And that's just because Gemini wanted to write it in a way that was debuggable 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 that both gives us the ability to quickly see if there is an issue, but then it doesn't expose any of our underlying 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, server -side validation, we added what's called an auth callback route, 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, 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 dev dependency, and then 6 .2, which was some built -in rate limiting.
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. We're now good.
We've basically solved for the 80 -20. The vast majority of low -hanging 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.
Some of our icons were missing as well because of that same thing, as well as the login and signup routes, as well as every other feature networking. 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 end to end full stack app with login, authentication, sign up, 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 and actually just vibe code an app.
What I want to do next, though, is I don't just want to vibe code any app. I want to take you guys to a higher level of understanding of modern software engineering principles. Because I think it's one thing to be able to just use natural language to 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... rather than this process takes two or three hours, you basically just build like your little starter kit with your preferred stack, your preferred tooling, and then some preferred examples.
Then you can get to the point where you can actually just like one shot an app like this. Maybe not completely one shot, but like 1 .5 shot. Take app creation, which previously might have taken a very, very long time because of all these small little decisions that you and I have to make.
And then get it to a point where it's 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, 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 80 -20 that allow you to dive deep into specific parts if you so want to. 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 all the hosting and stuff like that as 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 of your app, but then that 0 .1 % takes like 100 times longer just because of the nature of your preparation or lack thereof.
So in order to really get this, we just need to give a brief high -level walkthrough of how communication 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 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 replaced 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 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 Netlify 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 that's a good example of one.
Or let's just see Hostinger alternatives.
Bluehost, if you guys have ever developed a WordPress website or Cloudways or SiteGround 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, 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 Hostinger, SiteGround or whatever other service.
And then it'll send initially some very simple and brief requests for things like site HTML. It'll send requests for things like 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 are for, are they 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 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 idea 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 234234 over and over and over and over again.
Okay, so that's, that's pretty cool. 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 first we'll sign on to our app we'll initially make that request to the server it'll return a bunch of html and 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 click 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 will happen is we'll send that request over to the server. The server has a bunch of prebuilt logic, basically, that says, hey, when a user requests a specific dashboard data, I want you to call the database using this format and then retrieve it.
And then we'll say, hey, you know, we want the dashboard data. It'll do this in a slightly different language, typically SQL, although there are no SQL databases as well. and then it'll return you know that dashboard data the server will do some additional validation if it needs to and then it'll just return that to the client and so this is just a loop that goes on over and over and over and over and over again if the client updates something like let's say we create an order well it's the exact same thing we'll just send a request to the server the request will say create order server will be like okay cool so here's how i create an order then it'll take that request and send it to the database which will then add a new order to like your orders table So very, very high level 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 Excalibur, which does things both online, but also locally. And you can really dive deep into that rabbit hole if you want. But without further ado, what's the actual development process look like?
Well, for us, it's basically we just start local. so when we start local we run both our client and our server on the same computer right our client is like our browser and then our server is just like you know your your 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 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 customers and users can actually use. And so the process is basically always just like local staging production.
And this is not super relevant for our last step but it'll become more relevant when we use things like github repositories and version control because there are changes that you can make locally other people can be working on changes on the staging server and then other people can be working on changes even on like the production server although ideally you don't make live changes because a single live change can like screw up your your whole work um like your whole app like you saw earlier 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.
You do obviously need to pay for hosting for most services. you're not going to be able to sign up to hosting or SiteGround 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 a cost back there. So they arbitrage that and then they charge you some big multiple.
And there's like a bajillion hosts out there. There's like... VPS is virtual private servers.
There's like dedicated 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 then 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 communication. Another thing that's really important to understand are databases.
Now, for all intents and purposes, like I talked about, these are basically just like a Google Sheet. If you guys ever used a Google Sheet, Have you ever used Excel or anything like that?
The best mental model I've found so far is just to treat every database that you use like a Google Sheet. So just like a Google Sheet, you'll always have like 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 moved my big head out of the way, is called Sheet1 down here.
And Sheet1 Okay. It's just one of many possible tables in our database.
We can make a hundred 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, we have 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 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, 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, this is going to be important. You can see now we have a database with one table called sheet one that now consists of four rows.
The thing is, depending on the type of database that you're using, You need what's called a primary key. And a primary key is just something that's unique, one column, that's basically always unique from row to row, that basically defines that row or that record as 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 23F0I23F02, 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? That'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 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 star 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, you can do the same thing inside of a database. So if I go back to our little example here, and then 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 this record here, 23F0I.
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 -03. 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, you know, in your database. So basically, every time that you send a request from, you know, your client, your browser, by clicking a button, you send that request to the server, the server interprets it, what it's doing is it's sending another request to a database, which, you know, is basically just acting like a big Google Sheets filter.
Now, the cool thing is, there's two major types of databases right now. The first is called SQL based. So SQL based is divided into a bunch of different popular versions.
I mean, really, there's like 1000, but three most popular ones right now are MySQL, PostgreSQL, 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 SQL -based 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, 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, 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. And, you know, as long as you have a primary key, which denotes that this is a separate record, every other field is optional, but it has to stick to this structure. Now, NoSQL databases are a little bit different.
In NoSQL, I'm just going to create a new sheet here. Basically, what we have is rather than having just like one header row up at the very top, I want you to pretend that every single item in your database has its own header row. And so the first record here will have ID, date created, and value.
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, 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 in the first name well for the next record instead of just like sticking to this format you can 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 is 29th.
If I added another record here, maybe what I have here now is I have a full name. This one's Nick Seraf. 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 SQL database, you know, every record will have an ID, then it's optional, whether they update created or value, but it's not like they can have another, you know, it's not like this row could have another value called first name called Nick, right?
Unless we explicitly define that up here as a value or a header that exists on all, okay, whereas this would be empty, empty, empty, empty, empty, empty, and then this would be Nick, okay? It's not like we can just add additional features 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.
Now, obviously, for our purposes, we want a simple way to call a database and then retrieve all records that have a first name, Nick Sorayev, or that have an ID of something. You know, we're going to use SQL for the most part. But there are some instances where NoSQL makes more sense.
And if you want to look more into that, just look for the difference between like relational and non -relational databases. And then maybe you can have your agent tell you. Next, I want to chat languages and frameworks for people that might not be super familiar with them.
So there are three basic languages used these days in modern SaaS app 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'll 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.
I'm not going to give you guys a big historical lesson on each of these, because to be honest, I mean, I'd just be Googling this stuff anyway. 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 site, if you head over to info .cern .ch, you can actually see the very first website ever made.
And that website is called the World Wide Web. This is literally describing... the world wide web.
You know how all websites, or many websites, have www prepended? That stands for world wide 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.
Now obviously you don't need to have gone to this website to know how the internet works more. Fundamentally speaking, I think every kid just inherently gets it when they are given their first iPad with Cocomelon on it. No, jokes aside, the World Wide Web is a website that's entirely built in HTML, and you can see it 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 World Wide 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 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 that'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 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 js so what i could do is i could go document query selector and then i could look for all all h1 elements.
And then what I could do is actually remove this from the page just by clicking or writing document .querySelector h1 -remove. And this is an example of that interactivity that I was talking about. Basically, with JavaScript, which 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.
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 could do.
So those are the three programming languages, and hopefully we're all on the same 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 languages as 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 then 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 that included a lot of opinionated framework -based stuff for the folder structure and components and hooks.
These are all things that are basically a hand -me -down directly from our framework. You also have Vite right now. It's super popular, and you'll see a lot of apps created with Vite.
And then on the other side, you also have Vue, or really like Nux .js. And there are varying levels of abstraction here. Like Nuxt .js is actually, it's like a second framework built on top of another framework called React, which is kind of funny.
Nuxt .js is built on top of Vue. There are a lot of dependencies and stuff. Because remember earlier I said .
We really do. Because everything nowadays is built off of something somebody else built, which was built off of something somebody else built, all the way down to where we were programming computers with little ones and zeros on pieces of tape. And so in addition to our chosen tool, and this is the tool I'm going to be using for the most part throughout this course, Next .js, being essentially the way that we coral these three programming languages together.
Next .js is also an opinionated framework that helps us organize things like hosting, helps us organize things like how to do database calls and whatnot in a standardized way. You guys remember earlier we talked about middleware, authentication middleware. It has a standardized interface for authentication middleware.
It's a standardized way to put together routes, which are just the names of website endings. So Excalibur .com slash, 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 Next .js isn't new. It 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 have a lot of pre -existing products out there on the internet that were built with us. 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, to 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, 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. Because these frameworks have existed for a while, people have put together some pretty simple and easy ways to economize 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. Do you have to read through all the Next .js docs?
No, although 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 a slop out there on the internet, which are like simple vibe coded apps that aren't really well thought out and then interact with the rest of the internet in pretty stupid ways. The last thing I want to talk about is version control.
And to make a long story short, version control just answers the question, how do I store successive updates of files on a server as efficiently as humanly possible? Let me give you a brief little example. I'm sure, you know, back in high school or college or whatever, those of us that have gone there in the last few years, you've run into situations where, you know, you're tasked with writing an essay.
And so, you know, you write your essay probably really late in the middle of the night with a bunch of Cheetos beside you. At least that's how I used to do it. And then you save it as, I don't know, SA .docx, let's say.
It's like a Google Doc or something like that file. And you do it locally in your computer, maybe Microsoft Word. And then the next day, you wake up and then you give it to your friend and your friend gives you some feedback or something like that.
So what they do is they download the file and then they give it back to you. And then it's called SA with feedback .docx. 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 SA with feedback, you call it SA2 .docx. And then the cycle just repeats itself three or four times. Then you have SA .3 .docx, you have SA4 .docx, and so on and so on and so forth until you have SA final, super final, important.
dot doc x 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 dot 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, 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 that have historically occurred so that at any point in time you know you could download let's say this original file but then you could jump over here if you wanted to jump over here if you wanted to jump over here if you wanted to jump over here if you wanted to and so on and so forth all without just needing to like pollute your you know file system and stuff like that
What's more, at any point, you could also branch out and make additional changes here, however much you want, called, I don't know, new essay.
And then you could share that new essay 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. And you can do that with apps, you can do that with essays, you can do that with everything.
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 on 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 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. I've mentioned repositories here, like work log, make money with make gyro app.
One second. Copy .com proposal generator and so on and so forth. And these are all basically different projects that I've built.
Now it's cool. 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 restart my project from here.
I mean, I could do anything. I could share this with other people really easily and so on and so forth. So I say this not because I want this to be a comprehensive guide to GitHub.
Obviously it is. And I just like gave you guys a very high level overview. But in a nutshell, all this is just a way to store and save files.
And so whereas with our last couple of projects with our portfolio site, and then the... 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 share it with others. And then services that do deployment nowadays, like Netlify, Vercel, 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 netlify what i could do is i could just push it to this repo make a couple of changes and then netlify 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 i guess i have one here called chest day workout that's pretty funny must have crushed that chest i Um, and then just have agents manage like everything to do with, uh, with whatever project you have.
So for instance, like a little work log that I set up that basically just like a list of things that I've done. I use it to track my own, my own work. And, uh, I developed this in just a few minutes with, uh, with cloud 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 and then improve it over time. That's what a bunch of really popular repos tend to do because they've checked out like the OpenClaw one and stuff like that.
That's where they were getting 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 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.
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 therein.
Okay, so if I just go back to anti -gravity here, you know, I still have that old site set up. I should be able to clear this just by going to new. 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 X, Y, Z. 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 can 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 our 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 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 left 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, because I wanted to like have a bunch of these that I could quickly jump through. And you can see in this case, just ask me, hey, what the heck is ABC?
What are you crazy? and so on and so forth. This is some other thing that I've developed here.
This is some other thing that I've developed and so on and so forth. So I mean, like, you know, this is kind of cool, right? You basically can just go top to bottom and then see at a bird's eye view, a bunch of different conversations that you've had with different agents.
And you can do this across workspaces. You can start new conversations across workspaces. You can jump into a specific workspace using the editor, right?
And so on. The really cool thing though, is if you go to this inbox in the top left -hand 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 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 conversation by going in, paste this in, and start another conversation by going in, paste it in. And now in the Playground side of things, 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, choose all of this yourself, high -end SaaS for a demo I'm making. You can just paste this in. You could paste this on, you could paste this on, and then you could paste this on.
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 get a high -level overview of what they're all doing just by mousing through each.
Okay, and sometimes you're either going to run into token limits or there's going to be some issues or 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 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 shepherding 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 than every one individual one. But it's sort of like monitoring like three or four different CCTV 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 any time that a particular person needs you. Alternatively, it could be like you're a manager at some big office with a bunch of cubicles.
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 are capable of orchestrating significantly more total output or work than you would be able to do yourself.
So it's really worth using hotkeys if you want to start building things in this way. And 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.
The reason why is because then that way I could build multiple versions and then I could just pick the version I like the best. Once I pick the version I like the best, I drop the other ones and then I just proceed with that one. But yeah, hotkeys are pretty important.
So you can find those just by mousing over each of these buttons. So inbox is command I, for instance. If you scroll down to playground here, you can create a new instance just by holding control N.
And so a lot of the time I'm just jumping between new conversations and then my inbox over and over and over and over again. 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 that conversation and kind of work is happening.
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 move this into a specific folder. And so this is occurring right now in like a temporary folder that 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 right hand corner so if you follow along with agent basically it'll pull you back in to what the agent is doing at every step and then allow you to see the various um you know pieces of work that that agent it's worth keeping this page pretty clean so i'm just going to proceed with whatever the heck it asked me for and then over here now i basically have these two main threads that i'm running you can see the same things 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 whatever gemini 3 .1 pro is if you think about it i'm technically doing four times the amount of work 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 actually five now because i'm proceeding with some
agency operation thing I did a while back, just because I find like your attention gets pulled away a little too much. But yeah, you can see here in the top right hand corner, because I'm following this anytime it'll make a substantial major update, I 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 see, you know, do you need anything from me, if there's any specific feature or whatever that they want, then I can I can jump right in. So let me run this for a couple more minutes, get a bunch of websites, and I'll just show you what they all look like. Okay, and our landing pages are now starting to be finished.
So we can actually access the Vite server. This one's using a different framework called Vite that I covered earlier, just by pasting this in. And you can see we now have one of the websites.
Now I should note that this looks pretty similar to the one second copy website I had set up because I think I just asked it to build something that was like very, very similar visually speaking. So we had that little heartbeat, we have this little thing. But you know, I'm like trying to build it with a particular template, right?
So I'm just going to instantiate a bunch of versions of this template. And if I like them, then I'll go with that. This second one here is done.
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, npn run dev. 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 AetherCore, which is very clean. I really like this one. Damn, that's really, really sexy.
You know, there's 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 scroll down, but it is running live on a server and it does have that cool little bar up top.
this one here had probably my perfect instantiation or my favorite of like this low 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 can 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 SaaS, I just want you to come up with a different one every single time, and then it'll come up with like 100. So yeah, in this way, I've successfully built something like 15 websites simultaneously at the same time.
I found like the top two or three that I like. I 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, 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 simultaneously can be pretty cool.
Okay, now that you guys know more or less everything you need to know about both modern software development, 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 SaaS app that scrapes, enriches, and will even queue up on 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 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 a prompt, I wanted to take a few moments to sketch out what an actual app might look like and the variety of different names for this sort of thing. 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, I know for sure this app is going to need a landing page. 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 auth form in Supabase 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, we'll need some form of configuration page because I want this app to be able to be usable by people like you, people that 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. 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 you're 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 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.
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 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 is just going to be like a history page where you can see all the orders that you've 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 probably a real UX designer would crucify me in terms of the ways that I've laid all this stuff out. But you know, seems to work pretty reasonable for me.
What I do next is I basically just take a screenshot of this. And then I always have this on hand, because you know, I want to like know what my app is going to look like. Then I go into anti gravity.
And then what I do is I 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 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 cloud code instance has generated this prompt.
So that's good for now. What I want to do next is open a new folder because I've copied this and I want to call this lead scraping SAS. I'm going to create and then 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 a description, sorry, an example that we could use to basically inspire Gemini. I went on Dribbble 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 can actually make it look as nice if we really want it to. But for now, I'm just going to copy this image. I'm going to go back over here.
I'm going to 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 gonna have to take a screenshot of the actual app itself.
I think sometimes Dribbble does like anti -screenshot 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, 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.
This is like a full end -to -end cold email sending platform. 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 this 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 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 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 this is most likely going to end up using like a next .js stack. Although I did not this time necessarily want to being opinionated because I wanted to see what the app was going to do. 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 Vite, 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 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 I'm going to do that is because in order to access this application, we're obviously going to need 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've got the Vite server set up. This is the landing page. Super clean.
I like it. Okay, so we have some weird spacing here. That's fine.
This is really nice. Ooh, I like this. AI personalization prompt.
Very clean. Very clean. Nice.
100 free credits. Okay, so what happens if I click get started? I go over here, which is nice.
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, Nicky, Wicky, and then Nicky, Nicky, Nicky. Let's sign up. Okay, we're now inside.
We have some workspace settings on the left -hand side here. API integrations. On the right, we have some prompt engineering.
So define the rules leads 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 I'm cool? So it actually went, it found the specific API keys and stuff.
That's fine. Scrape leads. So we need a job name, LinkedIn sales navigator URL, max leads, then default icebreaker.
I think what we want is we basically are going to want to be able to just say, I don't know, like, HVAC companies in the United States. And then we want it to actually go out and find that for us.
We're not going to need a LinkedIn sales navigator URL because the Appify, the specific service that we're using doesn't actually use that. So it's going to be okay. Then here we have some fake order history, which looks really clean.
We can, you know, open it up in a new window or whatever. Awesome. Awesome.
Cool. So let me just check the bottom. You guys can't see this, but there's a little button that says log out.
Click this log out button. Nothing's going to happen. So obviously we don't have the auth set up, but yeah, I mean like in a nutshell, this is more or less what I wanted.
Anything else that we need? So New scrape job, orders, configuration.
I think that's basically it. Now what we have to do is we basically have to test this. 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 all on the same page. Otherwise, I think it'll be kind of intimidating for you guys to see what I'm doing. But in reality, most apps nowadays are just like wrappers, as in they just wrap functionality around some other app.
Of course, you could build your functionality yourself if you really wanted to, and I can help you with that. But in my case, you know, for the purpose of this demonstration. I'm just going to do what I normally do, which is I use a third -party service called this Leads Finder on Appify, which basically allows you to put in some parameters and then get some leads.
So it generates targeted B2B contact lists using advanced filters. Now, this isn't the best lead scraping service out there. I should note that it's actually quite poor in terms of quality now because the leads are cached and they haven't been...
I ran for quite a while. So I use this as an example and 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, we can use to narrow down the search.
The size of the 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.
Then 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 it goes and it scrapes it for like some small little piddly fee. So it's cooking up some data magic.
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, LinkedIn's, 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 purposes of 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, 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. 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 will happen behind the scenes is this Appify API token will plug into this search.
Then it'll use some data with an input like this via API. And then it'll find us a bunch of stuff. And then on the back end, what 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 all of the information laid out. So we can actually use another service called an email finder to enrich that. And then over here, we're going to pass in either our OpenAI 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 the best SaaS's do tend to be pretty niche. And 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 because 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 email, right? I want it to say like, hey, peep, 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 icebreakers. 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 then just make a bunch of changes. I'm also going to feed in like the API documentation 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 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 AnyMail 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 OpenAI API keys are filled out, the model should automatically choose Anthropic.
If Anthropic is empty and OpenAI is present, then we should automatically choose OpenAI. 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 a .env 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 back end functionality and we could use these and store them in a static database for now, just in like JSON files or whatever. When we eventually push to our database and use Supabase, then we can make these more dynamic. I think you have everything that you need.
If you have any 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 Appify API is going to be here.
It's going to go right into the Appify API docs. And then 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 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 GPT 5 .3. Check out both of their docs. Okay, and then I think that is 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 a .env and then paste in all my API keys for use.
That makes sense. So I'm going to go over here and then just go .env. And then I'm now going to go find a bunch of API keys on all the services that I promised it and then just paste them all in.
So this is going to be my Anthropic API key right over here. We'll then go Appify API key. So I head over to Appify.
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 SaaS app. Should I limit token permissions? Should I set the expiration date?
Yeah, I'll set an expiration date just in case I forget to delete it. Okay, this one is expiring tomorrow. That's all good.
I'm going to copy this now, paste that in. I need my OpenAI. Actually, do I need my OpenAI API?
No, I don't, because I'm going to use the Anthropic one. I suppose the other services that I need, I can find them by looking at my Vite app right here.
AnyMailFinder API key.
Paste that in. So we'll go to AnyMailFinder, 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 Antigravity, 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. 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 1150 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. 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 what looks to be no training examples, but that's okay.
These prompt variables are going to be objectives. The first name of the 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 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 the 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 that 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 Netlify, 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 or our first check statically so let me exit out of my cloud api keys thank you very much go right over here i'm just re -logged in and i'm just gonna go scrape leads so i'm gonna say and i imagine there are gonna 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 Lasonic.
I don't actually know how to say that. And then we'll go error executing leads to 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 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 8888 slash scrape, returned this, and then I'm just going to paste it in. I'm also going to paste in my input as well, just so that I could monitor this and also maybe have a little bit more meaningful of a back and forth.
But anyway, let's see what it has to say. Just as a form of parallelization, while this is debugging whatever the Appify issue is that's leading to inconsistent outputs, 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 so 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 The simplicity of the tool, the affordability of the leads relative to most other people.
For the AI personalization section, under AI personalization prompt, remove the export to one -click 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 nav bar 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 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 gonna have that operating at the same time as our other tool which is fixing the appify 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 it 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
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 locations, 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, you know, 8888.
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 it's 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 Appify scraper, see how this is going to shut over a request here.
And it looks like we are actually doing something, which is nice. 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 hang up. What I think I'm probably going to do, given that this is taking me like 10 minutes or so just behind the scenes, is I'm probably going to go and just give it a bullet point list of what it needs to do.
Basically, if you think about it, it needs to interpret my request. It needs to convert that into an input -friendly JSON object using a location table, UTC. Then it needs to send the request.
to some big long url which is going to look something like this just with a different appify 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 appify search extraction then any mail finder enrichment for now um so i'm going to do that next just heading back over here so i'm 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 new, really good at UX and stuff like that, eventually you will probably run into some rate limits.
In 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 appify 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 cloud 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 cloud code i'm now going to copy this okay then what i'm going to do is i'm going to open this up in cloud 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 cloud has an additional piece of functionality that Gemini does not currently possess.
That is the ability to go very, very quickly. I'm then going to double check my extra usage. Looks like I'm 600 bucks in.
So I'm just going to go extra dash usage. Keep in mind, you guys aren't going to be spending $600 and stuff on a cloud code usage. I'm going to just change this to 700.
I just use a, I use this for like so many different things, right? Juggling. five or ten 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 i'm going to give that a little refresh here now it's up to 86 use by 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 and i'll say proceed And now there'll 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 like, 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 Claude 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 I'm 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 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. 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 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 as to what the error is until we're good to go.
And it's telling me that it is currently running an Appify 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 hit 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 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 maybe being a little less descriptive. Okay, we've now completed the job. We have the CSV over here and I can actually open it.
and you can see all these leads are now scraped so we were basically like 99 of the way there right before i ran out of tokens just needed 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 You can also test the AI personalization as well.
I'm doing 100 leads, so this should occur reasonably quickly. Should be another five or six seconds. Okay, it looks like we're done with that.
Now we're doing AI personalization. So Claude, in this case, is generating personalized icebreakers for all of the leads that are in our database. Something I'm noticing here is the AI personalization is taking more than 5 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 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. 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 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. I'm just going to open this up again, make sure we have that personalization column. Where is that personalization column?
Here we go. Hey, Jean -Michel, 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, wanted to run something by you.
I can see that work reasonably well as an email icebreaker. So let's just exit out of this. We'll close this older one.
And from here on out, all we really need to do, if you think about it, is we need to fix this UX problem. We need to add authentication with Supabase, 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 Cloud, we'll paste this in, and 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, similar to the scrape page and the configuration page.
We also need to put this live and get this on Supabase. So I'm going to set up a Supabase instance, and I'd like you to assist me in the connection of that. We need all of the fields of relevance, including database fields for the configuration, the prompt engineering, API integrations, basically whatever you've done locally just applied to 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 a cloud code here i'm 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 appify scrape and so on and so forth while that's occurring i'll head over to super base 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. Hmm. Probably delete the proposal generator app.
And then set up a new one just because I think you're only allowed to on a free plan. And I want to show you guys how easy it is to set all this stuff up. So just going to delete that and then I'll go new.
I'm going to call this one. Let's go Nick J. Wells work.
We're going to call this lead. So 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 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.
And 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 super base public key. And 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 auth for us. so head over to authentication where it says email and this time i don't actually want it to confirm the sign up so i'm just going to go back to emails and then where i click on sign on sign in 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 super base 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 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 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 then i can start up another agent chat using you know anti -gravity's built -in functionality and have a conversation with it
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 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'd ask Claude to give me a detailed project description of everything that is currently occurring and all of its current context that I could immediately just segue that into 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 super base URL, the anon key, service role key, 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 logout 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 netlify functions before finally building and verifying there's going to be some back and forth there for sure 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 mail finder key system prompt instantly key and so on and so forth. And these are all going to be 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 JSON and JSONL files to work through, you know, API requests to. the Supabase PostgreSQL server.
to the Supabase PostgreSQL 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 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 studies and research and stuff like that. So too do I recommend doing this with models as well.
Having an unbiased third party review view 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 Cloud Opus 4 .6 designing something, Gemini 3 .1 Pro High designing something else. 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. When we click get started, I'll say Nick Sarayev, nick at nicky .com.
And then we'll go, I don't know, Nicky, Nicky. Click sign up. Okay, we are now being automatically taken to that config page just like I wanted to.
So here is where we'd set up our keys. And then we have that prompt, which is automatically set up. That's kind of cool.
Okay, I think what we need to do is we actually need to modify this prompt to make sure it's actually like. being reflected in the end result. 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, what's this, Appify.
Okay, paste that in. Any mail finder, we'll paste that in. Anthropic, 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. Go to orders.
There's nothing. Okay. If I go to scrape leads now and I say, find me a bunch of HVAC companies in Canada, owners of HVAC companies in Canada, and I got 20 leads and I run this workflow.
Is this going to work? So it's gone through and it's generated the filters. 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 with the UX here.
This is nice. This is nice and smooth. I like this a lot.
I also like these cute little animations and whatnot that it's decided to put in. Okay, job completed successfully. I also like how on the left -hand side it's renewed.
I don't like how this little scroll wheel animation on completion and export continues. 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 it's gonna take a peek at them same thing I did before okay icebreakers looking great love a pro parts 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 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 script. You can actually download the verified CSV here as well.
That's clean. Very nice. Okay, the last thing I'd say is 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 auth middleware here is working correctly.
How's our landing page? It's looking pretty clean. We don't have payment functionality yet, which I'll cover in a second.
This looks pretty clean. If I click start, we go back. Nice.
Also, dress up the footer a little bit more. It's quite small right now. That's on the landing page specifically.
Okay, this is cool. I like that little light effect that we got in the background. Real clean, real clean.
Product goes to product. Pricing goes to pricing. Resources.
Oh, there is no resources link, so we don't really need that. I suppose we could probably make a cute little logo. So why don't we head over to astudio .google .com and just do that while we can.
I'm just going to see if I can link an API key. Okay, I need a different account for that. And over here, let's see if we can link a key.
And heading over here, let's see if we can link a key. Cool. Generate me a simple square logo, minimalistic, straightforward, but immediately interpretable and high -end for a lead scraping SaaS called Leadso.
And then over here, the aspect ratio is going to be one -to -one. We're going to see if we can generate a 2K 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, a bunch of information down here, and so on and so forth. I've also been told that we should be good.
We 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. 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 Leedso logo and the colors here match the signup button. So I mean, is this going to win any awards for its design? Yes, of course.
It's gorgeous. No, jokes aside. you know maybe i had a real logo designer come in here 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 netlify already we had to use netlify to like do the back end functions or whatever that was the design pattern that the agent decided on this is already on netlify all we really have to do is just change the url and then create the site itself.
Just jumping into Netlify here, there is now a leadso project created a few seconds ago 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 set up GitHub as well and then link the two. And so this now apparently is online. If we go here, we have leadso .netlify .app.
So this is actually on like a real URL. So we could see up top. I think this might have made the logo a little bit brighter than I was initially anticipating, which is cool.
But remember that I want this to be 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 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 think I'm going to do, which is my final command essentially, is excellent. The landing page and auth and sign -in pages look great, but the dashboard... stuff after you sign in is not optimized for mobile, make sure that it works on mobile displays as well.
And while all that stuff's going on, I'm also going to do our security audit. What's cool is I could do a lot of these things in parallel side by side. So whereas previously I had Cloud Code do the security audit, I'm not just going to paste this big security prompt into Gemini 3 .1 Pro High for a couple of reasons.
One, I've already used like $800 of my Cloud Code limit at this point and I don't want to spend any more. Another is that the Gemini model 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 two hours or three 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 version control based security things that we couldn't do that last time because it was more of like a because we had just drag and drop the folder directly into Netlify.
So it looks like it's doing pretty well mapping out the front end and back end Netlify functions entry points checking .gitignore for secret management. I'm just going to let this go on its own and then along with the design components and stuff like that we can get to that. 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 nick at nicky .com. And then the password was like Nicky Nicky.
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 mobile browser view, which is really cool. And then we also have that little nav bar.
So I'm going to head to orders. Orders, you know, it's going to be a little tougher by nature, I think, but it 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 script here, but it'd be a little bit annoying to do that. And I kind of like having a table. Tabular data is...
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. I'm honestly quite pleased with the performance of Gemini and Cloud Code together on this app. So 10 out of 10 would do again.
We do have one more feature, I guess, which is that feature that I talked about earlier where You know, if it doesn't scrape the leads through Apify, sorry, the Apify code crafter actor, then I wanted to pass that off to Google Maps. I think for the purposes of the 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 end to end, like 500 different platforms 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 rest assured, you could very quickly and easily weave in. you know, logic like, hey, if this thing returns zero leads, then I want you to use this other approach. Yeah, that looks pretty good to me.
I guess we could also add that post any mail finder step. I might just do that instead once we're done the security audit. Generally speaking, though, you do want to do the security audits at the very end.
So it 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. It found major auth bypass in the API routes. It also found a hallucinated anthropic package dependency, so it's preparing some final checks.
That is a big deal, right? You know, it's done more or less exactly what I've asked it to do. Go through with a fine -toothed 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 this is where we're at. The first phase was where it was just identifying and running through the code base.
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 at anthropic dash ai dash 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 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 Vite instead of Next .js, which I think solves a few of these. In total, I think the score is like something like 70 % or so, whereas the previous app, I think was a little bit higher.
But yeah, you know, some of these are quite, quite severe, the fact that you could bypass the authenticated user. So if they're not authenticated, it skips the check entirely and proceeds to use the fallback process .env 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 jobs, open analysis, or anthropic calls.
All billed to my personal account. This is the same sort of issue that I think there was with OpenClaw at the time, where... 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 so 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 it 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 SaaS 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.
Realistic. 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's ever put together before and then put it on the internet.
And then that is what is going to distinguish your app from somebody else. And so in this way, 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 was a good show of what that might look like.
And by the way, just so we're all 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 TripAdvisor Review Scraper, DraftKings Scraper, there's Instagram Scraper, Website Content Crawler, Tweet Scrapers off Twitter, LAN .com Search, Instagram Comment Bots, and so on and so on and so forth.
You could build whatever functionality you want just by wrapping them around this service, which is quite affordable and straightforward and easy to use. And there are also a bunch of other services out there. that are like this that do similar things so i'm not going to tell you have to use one service or another but yeah like this appify or api wrapper game is super super powerful and it's blowing up right now The one thing that we didn't build today, obviously, was the payments integration, which is sort of like that final missing piece.
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, allows users that use our app to go from everything from like going on our landing page, clicking buy, buying the product or service, having some tokens added to their account credits and so on and 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 what will finally be like full stack apps that combine everything we've talked about here.
Okay, so let's have a brief conversation about payments. We've obviously set up authentication and 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.
But basically, In our case, with payments, we're going to have 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 auth.
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 generator app, for instance, obviously, it's probably going to be credit -based. 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.
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 what's going on, 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, we just have an agreement with Stripe where... via API, we redirect them to a Stripe hosted checkout page.
Stripe already has all the language and handles the card. They do things like advanced fraud detection. They do things like, you know, handle your tax obligations, like receipts and stuff like that.
And then they just send all of that stuff to the user. We never touch a credit card number. We just get paid.
you know, in return for doing the Stripe, but these are the payment processors, they usually make like a couple of percentage points. I think Stripe right now is 2 .9 plus 30 cents per transaction or something. 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, 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 the card is not fraudulent, if they cross their T's and dot their I's, Stripe will send our backend a webhook, 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, 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 Supabase, 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. And then, you know, because it's like this, you can now do a variety of cool features.
You could provision additional app 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 one -time 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.
They sign up via the Supabase auth function. Now they have like a little like user table inside the user table. There's a field that says subscribed 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 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, you'll receive a webhook and then you just toggle that access and then Stripe will manage that for you every single month.
Basically, 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 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.
If I was doing lead scraping, I would probably do either like a monthly plan with credits built in or I just do credits. For our thumbnail generator, we're just going to do credits. But you can use whatever combination of these you want as well.
The three things we're going to need in our code base, and keep in mind, like our models are going to hand this for you, we 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 a page with three different pricing plans or something.
And when they click on that, it'll redirect them over to Stripe with their information. Then we need a webhook endpoint, which is just like a little... 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 plan? Do they have valid credits?
So that's exactly what we're going to do in the next product built, 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 like usage step. Basically, now there's just going to be an additional one, which is payment.
Before, obviously, I let people use their own API tokens and stuff like that in the app. So we sort of bypass this altogether. 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 $9 in profit. That's more or less how any meaningful SaaS 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. I want you guys to know that if you don't have 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, 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...
The specific solution I'm going to do, I recommend just use whatever you guys have access to. Like there's Payneer. 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.
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 verify your identity and stuff like any good payment platform. 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 left -hand corner, you can then go switch sandbox and then click create sandbox.
That's what we're going to do. When you go through that little prompt, create it or model it after you're pre -using 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 collect. 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, 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 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. 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 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 wanted to do and then i'm just going to have it like go and give me its demo Once we have that demo, we can like in that little mining gif, 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. At a very high level, though, let me show you guys how I'm thinking that this app is going to work. So basically, 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 button or whatever, basically what's going to occur is they'll be taken to the authentication or a sign up.
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 like on the internal side? 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, 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. When you upload images of yourself, you'll be able to basically have the model generate thumbnails for YouTube or other content platforms that include you.
And then we're also going to have like the generate page. this generate page is where we're going to be able to you know put in some 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 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 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 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.
But basically, in a nutshell, that's going to be a 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 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 one dollar equals 10 credits or something We'll keep it really simple, obviously. But if you were a business, you'd actually want to run through like the economics of pricing and stuff like that.
Okay, so pretty straightforward, pretty simple. 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 you produce it locally, we'll iterate test. Then we'll push it to like actual databases.
We'll iterate test. Then we'll make it live on Netlify, iterate test. Then finally do a security audit.
Same thing that we did before. Just going to head over here and I'll type web app. because a lot of these are mobile based and I just want this one to be not mobile based for now.
I want this to be really clean. In fact, I want this to be like the cleanest, sexiest app that we've developed so far. 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 freaking genius here.
He actually included the font down below as well as the color palette and everything like that. This is for like some app that supposedly monitors your brainwaves, which is wild. We're obviously not making an app that monitors brainwaves.
We're making an app that 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, primary F4E18E, secondaries, and then I'll go D6, D6, D5, and then D, is that a B or an eight? I think that's a B, D, B, D, B, D, B. Anything else that we need?
We also have The white is going to be E3, E3, E3, and then the black is going to be 04003. 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. 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 ifomorphism, but that's fine. 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 stand -in for the db later we'll do the actual super base 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 a file structure using 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, uh, 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 run dev. I then navigated local host 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. It's going to refresh this here.
You can see that we have a bunch of the social proof pieces here. Global tech, Nexus, Nebula, and so on and so forth. Professional thumbnails, zero Photoshop skills required.
That looks pretty clean, honestly. Simple pay -as -you -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 nickinicky at gmail .com. Continue with email.
Now we're being taken to a payment page. This is really clean. I like this.
I'm going to click pay $10 here. It's empty, but we should still be good. And now we're in the thumbnail 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 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 yeah, why don't we pick a name? Why don't we call it Thumbly? I think this is actually the...
the name of one of my startups. Now that I'm mentioning it, I used to literally be called Thumbly and it was something similar. I was like creating 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 going to lie. Okay. Okay.
This is how it works. You basically, basically generate thumbnails. Then you can select them.
Man, I coded this. by hand back in the day. Okay so let's call this Thumbly and then let's also make a bunch of changes.
I'm just gonna do some voice dictation and then I'm also gonna like have it really push for that high -end white design style because I don't like this first demo. So I'm gonna say let's call it Thumbly. Feedback and now I'm gonna 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 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 pre -fill 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 nano banana and replace with thumbly as mentioned add more social proof here because we're running out of them pretty quickly as the business name 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. 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. 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 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. 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 color on the left -hand most navigation elements. That light green or whatever it is, the neon color is a little rough. So I think we're probably going to have to reduce that just for contrast purposes.
Are we using real glass isomorphism here? If you don't know what that is, I can provide significantly more context. Anyway, 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, pretty well done.
I like this. I'll provide you that landing page and then you can try copying it verbatim to start and then we can make some other modifications afterwards. Here's the landing page.
Okay, that looks pretty solid. Now 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 advice.
It's kind of neat. So it's just done that up here. 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 in the background and stuff like that. So that's pretty cool. Quite sexy.
I really like being able to see that. It's doing the same thing underneath with like the soft gradients and then obviously changing 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 generation. Website's slowly getting better and better. It's getting cleaner.
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 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 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. I'm not liking the slight difference in...
Oh, actually, no, that's basically perfect. Why don't we just, 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 app is.
This looks pretty good. 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. We also have emphasized contrast. So now the generation prompts are auto -populating.
And yeah, I mean, I'd say this is pretty great. I don't like the background blue on the inside of the app page, like the dashboard that 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 sign up button in the nav bar, the real -time generation from your prompts widget, and the dashboard in the hero header 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 verbiage if necessary. And then everything else looks really clean. Yeah, that's about it.
Alright, this is looking a lot cleaner. We have everything that we need on the landing page. 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 aistudio .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 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 or really high quality thumbnails and then you just replace them and make some minor adjustments. 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, Christoph 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 want 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.
And I'll say replace the man in the thumbnail with the man in the profile picture provided. And 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 basically want to do, what I'm instructing 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 I 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 fellow'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. 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 astudio .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 connect API keys and tokens and stuff like that. So I have an API key over here.
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 Thumbly. gonna click create we're not gonna 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 i'm going to open up a dot env 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 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 Supabase 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 Supabase just like I've done before. Head over to Supabase .com. Or rather, I think it's Database .new is even faster, right?
Yeah, there we go. I'm going to do it inside a 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 leadzo database, right?
So I'm just going to delete this project. Leadzo DB. Cool.
Thank you. Delete. 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 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 paste in my database password let's say super base db password paste that in um i don't know super base 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 super base 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 Supabase project ID, paste that in.
You can see it's the same thing as in my URL. Supabase project name. I'm just coming up with all, excuse me.
I'm just coming up with all this stuff myself. Like I'm coming up with these names myself. 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. And then, yeah, now it's just provisioning my database and API inputs, 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 credentials for nano banana and then Supabase 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 specific endpoint to reference, but basically we're going to be replicating the functionality of 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 generate the thing.
Keep in mind, we're going to be supplying two inputs, the provided thumbnail image, and our prompt, I guess, three inputs. The provided thumbnail image, images of the person's face, and then a prompt.
Check their... 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 data here. So, you know, earlier I had that portfolio builder image.
I'm actually just going to supply these images. 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 This was pretty big, actually.
I don't know if we'll be able to feed all this stuff in. Let's say face.
And 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 is like four megabytes. This year was like. i don't know megabytes so in total it's gonna 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 gonna 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'd stick your own social proof in and then all of the um buttons and stuff like that are square now which is cool and everything is just a little bit more squared off i don't actually like this shadow there's a slight shadow in the background here which hurts but not the end of the world we have the ability to change this this is nice cool cool cool awesome i mean like you know i think this is basically like the
the MVP of a high quality app with the landing page. So wonderful. I'm just going to wait and then 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 dot Google APIs appears to be the endpoints.
That's pretty nice. and so it's gone through and actually verified that this works and it's created 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 database functionality let me 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 episodes contrast so no i'm going to say but replace with the user oh 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 now got this in the URL too, which is clean. I'm gonna click generate variants.
And this is really like the test of the functionality. So I'm gonna give it a few seconds and I'll double back with, 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.
For whatever reason, 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 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 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.
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 so that i just can see the actual image immediately 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 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 the really badass lighting on the face. That's neat Um, so now what I'm gonna do is I'm just gonna select one of the variants that I want to keep so I don't just like this one that one looks probably the most realistically me anyway, and Then I'll click keep selected thumbnail.
It says thumbnail saved to your gallery, which is awesome Okay, 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 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. Aside from that, though, everything looks like it worked really clean. Oh, instead of like the alert that comes up, just make like a nice modal, a nice toast message that then allows you to, I don't know, open it in a new tab or download the image.
Or 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, 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 super base 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 stripes that the payments work and then yeah everything's just going to be 100 live which i'm really excited for speaking of stripe i forgot but i do need to provide the keys there as well so let me head over to stripe sign into that sandbox it's right over here and then i'll give both the publishable key and then secret key so stripe publishable key stripe secret key.
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 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 incorporate it in the flow.
I don't actually have to wait until it all finishes. So it'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. I'm going to set that.
I'll say replace the face in the provided thumbnail, which is the face supply to your cinematic and dramatic landing on the face. Also replace 100. to 1000.
Let's see if maybe we could get a slight little variant of the actual number in the background as well. Generally speaking, my experience with these 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 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 rosacea um honestly i think all all three of these are really badass so i'm gonna keep this one and as you can see we have a toast message instead so i can download this image i can open in a new tab 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 as it wills. And then we'll double check how all that works with SQL when we're done with that.
Okay, now I'm going to use the... a big thing inside of Supabase 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 you can.
It's just the comments that the previous model did for me were, I think, like with two hashtags instead of 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 you can 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 base 64 and then create it 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. Obviously, if they have credits, any credits, then we'll populate that. That's where we're going to get this from.
And then if they're at zero credits, then when they attempt to make a thing, it'll check their credit balance. And because they don't have any credits, that won't be able to 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 mock routes, which are when you store all of the database files in your local computer, to ultimately live Supabase instances. And it's just doing a build right now to verify that everything works 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 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 Supabase. And then I'm going to turn off the feature of authentication that forces us to confirm our email. So you can do that and sign in.
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 at nicki .com. Continue with email.
Let's see what happens. Just says signing in. There's no password, so this is a problem.
Notice how before we always had an email address and a password. Now we just have this email. So I think this is probably a blind spot where it didn't really realize, oh, okay, we're connected to Supabase now.
We have auth, so we're going to need an actual login page. Hey, the login right now only requests an email, but I need to authenticate with Supabase. 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 let's 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 set up yet.
So we'll double click that. We'll double check that. 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 Kureti to blow up your channel. Gemini will do this every now and then. I don't really...
Sometimes it's sort of annoying when it acts without necessarily asking you but in this case it was what I wanted because really really early on in the prompt I said hey I want you to make this longer and then it said something like oh I don't have enough context to make this 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 pre -loaded 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. 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 visual appearance of very fast very performant website Okay, we have some new Supabase 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.
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 Supabase 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 nick at nicky .com, then nick at nicky.
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 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 nick at nicky .com. And do we have the account? Oh, you see, because we exited out of the 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. I'm just going to enter this in and then I'm going to proceed to check it 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. More pointedly, 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 it goes 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 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 click to generate variants, 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 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...
I have some front -end error. Fix that. If it has to do with Supabase, 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. But we do need to make sure that if credits available are zero, that we immediately jump back. So that's another design decision.
If a user has zero credits upon sign -in, we need to redirect them to a payment page where they could select 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.
You know, it's probably just some slight little database misconfiguration or whatever. And so I can actually proceed in this way, 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. They just seem a little bit off, 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 of inspiration, et cetera? the title text is good so how to slimly 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 arbitraging the time between the changes that are occurring here and then 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 Guys, why don't we pretend I'm doing pro?
And then every time I click redirecting the stripe, it looks like there's this problem which pops up. So I'm actually going to copy this over and then say, every time I try making a payment by clicking the proceed to checkout page, this error occurs. I mean, like, you know, we could also parallelize this and do a bunch of them simultaneously.
No real need. But yeah, I mean, like, you know, we're getting closer for sure. One other change I 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 go to a specific payment page I'm unsure if this is because I'm logged in or logged out though. I'm gonna 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. And the way that this always works is you can just put in whatever numbers you want, so long as your card details are 4242 repeating. So I'm just gonna 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 went through, but then it redirected me to the slash payment route. 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. And I'll click processing there.
That payment looks good. No, it must be a more broad issue. So check that stripe here.
It looks like we are receiving the payments, so that's going through. For whatever reason, we're not actually capable of connecting that back to a person. This is my fake card, nick at nicky .com.
That made tons of payments. I'm just going to relay this information over to my agent. If agents have a hard time dealing with stuff like this, it's best just to give them as much context as humanly possible so they don't get stuck on one loop over and over and over again.
Okay, it looks like I've finally made it into the dashboard. So we finally solved that persistent error to do with payments. As I'm sure you guys can imagine, you know, adding payments is like adding another whole problem that you have to solve, which is why I wanted to push it off as long as possible.
But now that we have, I'm seeing that the credit monitoring is good. Settings look good. I'm going to try uploading faces, see if we could 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. 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 me from before.
Let's do this one here. And then 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 pre -fills 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 pre -filling 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 not 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. Let's 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, and now I can do more. Okay, and it looks like this is taking some time to load. I mean, it's saying zero.
Okay, now it's saying 97. I think I know the problem. I think in order to fix whatever payment BS that it had to do, it's now fetching data from the database on every page load, which is adding a fair amount of latency and then causing the app to lag a lot more.
So it's obviously not what we want, but it's what's going on. That's why every time I load settings, it takes a second before this comes in. Ideally, what you want to happen in a full stack app like this, at least a modern full stack app, is when you sign in, you want it to automatically cache and then like...
like pull all the data and then cache it. And then that way everything is pre -filled. All the images are pre -filled, the credit amounts are pre -filled, 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 the database, then it says, hey, you know, you should probably grab the new data as well, just to be 100 % sure. And in Next, 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 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 let's 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. 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 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 have 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 it 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 jumped to dashboard where we have functionality and 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 -gen .netlify .app. I just said, Hey, put this puppy on GitHub and Netlify. 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 at 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 cardholder 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.
What was it again? Was it supplied? Yes, it was.
Keep this identical to the inspiration image. Replace the face, the face, the reference image. Use dramatic cinematic lighting on the face.
I'm just going to save this. Says that it's saved 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. 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.
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 When we were running this locally, we didn't have a timeout, but services that manage the calls for you, like Netlify, 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 Cloud Code.
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.
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 because the first one that's like actually objectively failed. Uh, but yeah, no, I like this one. So why don't we just keep selected thumbnail?
Awesome. Looks clean as per usual. And, uh, yeah, I mean like we'll just click generate another and we can just keep on going as many times as need be, but that's it.
We just launched our app and it works. And there's one final thing we need to do, which is that goddarn 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 to 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 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 auth middleware okay so i'm just going to say implement the middleware with check stripe webhook 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 width check migration on the database.
So that's going to be cool. And then we'll also add some webhook 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. 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 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 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 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 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 output quality of, let's say, a blog post converted to like X thread snippets or whatever ends up being so bad that, you know, the AI slop 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 name so far have been afterthoughts right but um this time i think i already got one it's gonna be called splinter and the idea is okay you're gonna 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 want it to be able to create content for a platform like LinkedIn. I want it to create content for Instagram.
I want it 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, because it's kind of a big ask. But we should also be able to create like video, like full stack and end video.
That'd 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 in 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, then we have some other like central section over here, I want this to be more interactive. And I want this to have some sort of like really detailed onboarding as well.
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 summarize a landing page, Stripe payment integrations, AuthDB, some sort of API wrapping, and then a good way to 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 onsite logic to, well not onsite, 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 hopefully we all know like AI is the big thing right now. So it allows us to sell both AI and our value props, but also AI through the apps.
And my goal when building apps is I just want to build stuff that like I actually would use. 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 with that and stuff like this as well, then that'd be even better. OK, 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, I 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 processed every second through. I don't know if it's like web GUI or something like that, but it's some sort of 3D library.
And he shares his prompts online. It's really cool. I used him in my last video.
I wish I had half that 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. OK, 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 generate the landing page and then we'll build the rest of the app out afterwards.
So, you know, kind of nontraditional, but basically what I've done here is I've just pasted all the stuff in. OK, I'm going to press enter and I'm not going to read this whole prompt to you, but this is basically. Act as an elite, award -winning creative developer and digital generative artist.
Your task is to write a single self -contained executable file that renders an ultra -detailed, 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. Provide some information about what I want and stuff. And stylistically, once we have this set up, I'll make some minor modifications to it so it's not a one -to -one clone or rip of this.
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. 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 I'm not going to repeat it all over to you guys, but. Hey, I want to design an application that takes a single piece of pillar content and then immediately rewrites it, regenerates it, and recreates it, and then syndicates it across a variety of platforms.
Okay, and I just gave that over to Cloud Code, and I asked it for a spec, which is basically a high -level description or overview of what this app would look like. And I just want to run you guys through this here while Gemini's designing the actual generative part. So this includes tech stack, 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, info about the dashboard, the content library, AI configuration and voice model, scheduling and calendar, analytics and reporting, settings and account management, API and webhook architecture.
And then also some direct platform publishing and the 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 tech stack and then asked it to come up with some other things.
So for instance, we're going to use Next .js 15. We'll use Tailwind CSS plus the shad CN slash UI component library. We'll have Supabase real time for live updates.
We'll do a bunch of other stuff as well. Zod validation. This is important for security because I asked it to make sure that it was as secure as possible in 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. Platform connections for now. I'm just going to leave those out.
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 a 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.
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 left -hand side from Cloud Codes, 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. 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, 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.
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 as the demo. And then once I have those core functions and features, and then I'm going to do more. But you should also be able to upload things like mp3s, waves, m4as, OGGs, 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 change the prompt anytime I want.
So very valuable for me. Hopefully, it'll be as valuable 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 in real time. I don't like how this neural flux stuff is all over the place. Obviously, that's that's okay.
I've since told it to slow things down a little bit. But yeah, I mean, like the text on the left hand side of the page looks really, really clean. Obviously, we have like nice little mouse over buttons and stuff like that.
I'm going to change all of this Synapse stuff to Splinter. But for now, I mean, Gemini 3 .1 and, you know, prompts from Mr. Leon Lin over here are absolutely crushing it.
So pretty stoked and looking forward where and looking forward to where the next 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 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 interactivity do you see how this thing's 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.
Voice and tone being an afterthought here, we're going to fix that via 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 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 could 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, it's kind of neat just seeing this little streaming animation. Pretty interesting seeing the logic and kind of the math that 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. It 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. 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, 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.
You know, we're going to want to clean out some of the contacts and stuff, 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 the side of the 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.
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. 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 underscore spec dot md. But there's one change. I'm going to say along the way document each update in an updates dot 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. 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. 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 Claude Opus 4 .6, or whatever the freaking model I want. And in this way, this is almost like a GitHub repo before I get all the pushing logic and stuff in.
But I guess to take advantage of AI summarization features, so I'm not gonna have to load the code base 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 seen the . But basically, It's like how to draw an owl.
Draw some circles. Draw the rest of the freaking owl. 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 file website. Instead, we're going to be distributing some of the stuff across a big file structure here.
You can see that it's also set up the updates .md, which is quite nice. So we're going to see technical decisions, feature implementations, significant changes applied to the splinter project. And my hope is by doing it this way, and then later on feeding this to, you know, Claude, I can have both of these models, both Claude code.
sorry, Cloud 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. This updates to me is just a slightly more streamlined version of doing that without me having to waste $400 in tokens, because 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 Next .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 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 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, 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, 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, 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 kilometers 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 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 can occur because, I don't know, like the API is just out. It could occur for rate limiting reasons or just because sometimes 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 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 gonna 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 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 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 okay cool So yeah, I think I'm understanding where we're at with this.
It's looking pretty clean, and I'm glad that it 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.
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. I guess we could probably auto -generate a prompt that includes some settings with us.
For the sliders, we'll use this in a prompt to fill variables like formality and humor.
And then this dryer and simulation will 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 Dribbble. Over here I'm going to go Dashboard.
And let's see what we can do here. I want something that's just like much higher end, cleaner. I do like the square look.
To me that just implies like a high end brand. so i'm gonna 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 yeah i'm sorry we need to copy this we can't just do that okay 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 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 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 higher end sort of lux design internally that still sticks to 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 left -hand side pane that I could use to select different views. I really, really like the system log.
I like the credit usage, the generations, 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 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. I'm going to include some API credentials for Anthropic in a second, so you could hook up the Cloud Opus 4 .6 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. I don't like, you know, some of the other language that you're using here. It seems a little too try -hardy.
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 doing next steps, which in my case involves feeding in the Anthropic API key. So I'm going to go and find the Anthropic API key here. I'm going to call this 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 clod 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 dry run examples of befores after is then 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, there are some other trade -offs. You know, it's a little bit faster, and in addition to being faster, I think architecturally it tends to make like a better functioning application. So that's why I front -loaded 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 back -end passes with, 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 sign in providers and then I'll remove that little confirm email step and then under project settings I'm gonna 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 will go Supabase 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 super based 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 antigravity was using its own built -in browser cloud code typically uses chrome dev tools so that's what it's doing right now jumping on taking a screenshot and then it's seeing an internal server so whatever it did either didn't compile or there was just some problem on the back end 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 at the time of this recording and designing those really high -end uh looks unless it's like perp
perfectly basically trying to duplicate functionality, which is unfortunate. 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 three years to hit one mil ARR with our SaaS product.
Here's it actually move the needle and what didn't. So this is a... phrase that i explicitly said that i didn't want in the prompt so obviously i'm gonna have to do some adjustment there we sell to dental practices only dental practices the temptation to go horizontal was constant but saying narrow meant we could outbuild and out market anyone in the space we charge more than felt comfortable from day one honestly the pricing anxiety never fully goes away but underpricing would have killed us okay just while we have this i'm gonna go back to the actual page make sure that nothing else was changed here cool so the design here is quite nice right hopefully we can we can see that the question is where do we go from here get started sign up what's the wizard looking like okay okay and then we're gonna 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 are 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 Cloud and see if it can solve this. Hey, I want the design of the dashboard to reflect the design of the landing page.
Right now, 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 the soft purple, which is correlated with, which is typically associated rather with LLMs. I don't want pill style things anywhere here. And in general, I want 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 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 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.
Content library, those profiles, analytics, config, and API access don't fully work yet, but this looks a lot cleaner. So we paste a URL or drop a file or type our content here. If I go into my finder, if I go into my finder and drop it, does that work?
Oh my goodness, it does. That's really clean. Likewise, if I paste a URL, so I don't know, let's do this one here.
Okay. my big cloud 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. Obviously this is going to be difficult to see the differences between these lines. So it 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 whatever relevant features make sense. And if there are any additional features that you think would make sense on the left -hand side panel, please add them. I'm attempting to increase the at least perceived sophistication of the app right now.
I actually just stepped away to grab myself some breakfast and I came back and it looks like Claude is still mucking away at this. It's been probably 30 or so minutes. I've had very little actual hands -on involvement.
And yeah, you know, like the agentic workflow time horizon of this specific model tends to be quite large. I'll say Gemini actually is a slightly longer one. But when you prompt it right, where essentially you say, hey, here's a big roadmap of things.
Here are a bunch of changes that we've already made. Here's the 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. 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 using the clod 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 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 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 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. And we have like enabled and disabled and stuff like that. Right now, these are all just stored on the local database.
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, 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, you know, if you make your apps like agent compatible via API.
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, as I'm sure you can imagine, but still pretty reasonable.
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 cloud code, either agent team, or I'm just going to ask it to run through one by one by one, the idea would be, you know, spin up a 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 that stuff goes. Hey, this looks fantastic. I don't think there's anything else here that I really want on the app.
Maybe on the dashboard, there is a little bit of white space at the bottom because the system log is just just a little too long compared to the connected destinations. I think we could probably fix that by adding one additional row of connected destinations that'll 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 auth because I want to verify that this actually works.
So 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 sign in with LinkedIn using OpenID 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, in this case, Claude, but Gemini as well can just walk you through. Then under Auth, OAuth 2 .0 settings, we need to add this redirect URL.
So I'm going to go up to Auth, 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 gonna 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.
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, you know, 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 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 small business owners are terrible at hiring.
Honestly, it's not because they're bad at business. It's 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, cool. All right.
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 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 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 and over again that's not how most human beings will write unless they're trying to be direct response copywriters and for the most part we are we are not so find a way to adjust the prompt cool and then everything else looks pretty good so i should be able to actually like push this um The thing is, I don't really want to because then I'm going to have to publish this on my own LinkedIn, right?
Yeah, 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 gonna 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 sign -in flow.
We do have some more platforms here, as you can see. Fix the onboarding wizard as well. It should now function off of live data.
Right now, it's just doing the basic pass with templated stuff. Okay, set up. All right, all right, here we go.
Content library. Go back to new syndication here. Go next 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, 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, in 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. Let me just... On the generated content.
Really helps to be hyper -specific.
Did this copy work? Yeah, the copy worked.
Okay, so I just want to double check. I'm 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 for left click.
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 at 675 followers in that company page.
That's funny. Looks like there was a specific issue with how we push 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 a 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 left click.
Let's go left -click LinkedIn. Just double -check that that didn't post either. It might have.
I'm just unsure if I'm posting to company pages right now or my own. Okay, it 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.
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.
But I do want to check to see whether or not we could post specifically. 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 yeah, we've just verified that this actually does post. So fantastic work.
That's incredible. 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 right hand corner, we have a new so I can actually just click new, go back here and then do another one. And then I can also store all of that. So you guys saw before inside of the content library, along with the specific generation for that rung.
So that to me is really, really neat. Also, the fact that we have sort of the ability to go listicle view is cool. You can tell that this really ran with the spec that I give it and it's it's done a good job.
I don't know. Okay, cool. Yeah, even the search works.
So very high quality stuff here. But 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.
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 dropdown that I can click on that allow people to actually modify the underlying text as well. Under analytics, I want you to make sure that we are actually reflecting real analytics. 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, 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. 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 Supabase, go to the SQL editor and paste this in, just verifying that these comments work. Okay, it looks like they do. I'm not 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, which I think I'm going to do for a final design. But that should allow us to push through probably most of the database migrations and stuff. Supabase, SQL added.
Just to be clear, I don't like combining multiple different models. 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 that Gemini has to be used in the Gemini thread. Generally speaking, you get much higher quality results because this thing has processed so many tokens at this point.
It has so much history of past design decisions and stuff like that that it just inherently gets what it is that I'm trying to say. If I were to try and just have Gemini, hey, pick up where whatever left off, you would basically have to do the entire job of re... traversing all of those failed paths.
So we're going to push this through with quad code. And then at the end, I'll probably do like a little design or redesign, maybe do some finishing touches, some, some final polishing with Gemini. Okay.
So I'm going to say, let's go 100 % super base and we should be good. And it just got back to me saying that the Supabase migration is now complete. So it's also given me a summary with a bunch of API route auths.
It's verified the build and whatnot. Verifying the build to me is not enough. I need to actually go through the whole testing 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, you know, actually like a Netlify host and then also adding payments and stuff like that.
The reason why I'm not adding payments right now is I sort of had a change of heart. I thought a little bit about 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 it has like a fair amount of callback functionality and I want to be able to give it a URL.
So I'll do all that stuff after. Anyway, I'm not touching anything here. Model is now proceeding autonomously and it's doing some 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 Supabase issue.
So I told it just to give me whatever it needs and I'm going to go through and actually... I can see this doing some silly BS issue. What I'm going to do is I'm just going to run this directly in the Supabase editor instead.
It's saying alternatively I can 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 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 just like kind of glancing around at each. It's basically what we're doing here. Although, you know, with a little bit less context switching system 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 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 the part where I'm ready to go. I can see it's looking to ask a question.
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, push to Netlify. Use my credentials since we're just demoing. I'll remove them later.
And that way I'm going to have my ENV keys and stuff like that so I can actually go through the... the generation process and stuff.
Cool. So now setting up Netlify 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 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 stay Stripe publishable key. Add that. Also go Stripe secret key.
I'll add that. And I realize it's probably gonna have to redo the update. Hey, just a heads up.
I've added Stripe publishable and secret keys to .env 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, I'll do an end -to -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 .netlify .app. I don't really think I needed that dash app there, but the model made that choice and that's okay.
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. 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 have it run through some final designs. Hey, the landing page looks solid. Just checking the live Netlify link now.
I'd like you to add more platforms and social proof. 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, not screenshots, but actually just mini builds. that 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 words about distributing smarter here's how we scale to 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 right at our calendar. It's pretty neat. I'm probably not going to do the demo stuff.
Anyway, that's fine. We'll start free trial, so now I'm going to add some context. So we'll go Nicky Sarayev.
Go nick at nicky .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.
It 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, and I'll click generate. We should go through a generation script here and it should be real. Okay.
So the output is what you'd get in production. Nice.
Cool. This is now taking my post and then it's iterating on it slightly.
Wow. This is great.
Nice. Oh, nice. Yeah.
So I think the, the difference, here and the reason why this reads so well is because i specifically told it do not have those crazy short sentences with like super long sentences immediately after and then alternating because it's like blah blah blah blah blah blah blah that's not pattern that's signal right it's like you know that that's ai just the way that it writes it this has solved that for me which is clean okay nice anyway finish setup apparently we're all set so we'll go to the dashboard here Okay, and we ran into our first issue, which is an application error.
So I'm going to paste this in.
This occurred right after the onboarding wizard. And now I'm just going to continuously push until I get all the way through the app. Now, logically, what we should do after we are done our little onboarding wizard.
is we should go directly to a pricing page. I'm okay with people making their initial requests, my little LinkedIn rewrite thing, without having to sign in. Because while I know some people will abuse that, the abused -ness, 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 nicely formatted and tuned for LinkedIn.
So I'm going to keep that in, but immediately after, we do want to force them to pay. And at that point, they'll be in a little bit of reciprocity. They will just have used our app for free, which allows us to say use for free.
And then in return, it's sort of like a teeter -totter scale. In return, they're going to want to balance that by paying us. And then I think I'm going to make the intro offer pretty affordable so people can sign up, get the ball rolling and stuff like that without necessarily having to spend a lot.
And then from there, as they grow addicted to Splinter. then 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 slash 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 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 a platform. 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, and 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 credits.
It's your consumption.
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. And if I can make the post, 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.
Posting functionality, which is the core functionality, clearly works well. 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. 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 see if we can create a voice profile now. And then we can also adjust the system prompt, which is nice. Cool.
Looks like there's a 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. It's picking up our time. So 1257 PM, we submitted one, which is really cool.
And then it looks like we've outputted one LinkedIn post, but it's also writing one X thread. Also, I only publish 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 queue. So this is the generation. I can actually select 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, and you can set the date using this cute little calendar.
So why don't I pretend it's 2025, 02, 28. Okay. And then, I don't know, we'll do 255 in the morning.
That looks good. Let's add to queue. Cool.
And so now we do have something coming up on Saturday at 255, which is nice.
Now I'm moving over here to setup. It looks like I can change my account details here.
Let's just pretend I'm only saving my name. If I refresh this, you see that that that's not persistent. The setup page doesn't save my account details when I change it.
For instance, I changed my name from Nikki Sarayev to Nikki Wiki. I pressed save changes and then refresh the page and there was no context there. I do like how under billing we do have both the free plan and then we have starter pro and business.
So that's nice. Let me add these little notifications and it looks like they're toggling fine, which is good. I do wonder, I don't think that this is a hundred percent hooked up.
So we'll have to double check that. We have the ability to delete an account. Oh, wow.
Okay. And that auto deletes. 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. Update everything so that it reflects the new URL, not api .splinter .io. And finally, we have this webhook feature, which I don't know, let's just go webhook test.
And over here, we can copy a webhook URL, we can basically paste that into our app and say, hey, when this is complete, scheduled or posted, I want you to deliver to this. So 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. And I'll just copy all of this over again, paste it in. Okay, 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 webhook was actually sent. If the webhook wasn't sent, I don't believe it will be.
I'm just going to notify the agent. Hey, the generation occurred, but the webhook was not sent to the address that I added. 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 second post, which is nice. Okay. What else is it telling me?
It's telling me that 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 want it to hard code the change.
Okay. Just taking a look at this. Code example still says...
Okay, I'm going to go to upgrade and let's see if that works. So we can now select one of these three options. So I'm going to go pro.
Seeing that it's opening up a Stripe checkout page, which is good. I'll go to USD and then I'm just going to pretend enter some details here and then click subscribe. It 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, 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. This using this. Supabase session.
I don't know exactly what that is. I imagine this is probably going to solve it. Yeah.
Okay. So we're going to have to rewrite that a little bit. The good news is the name now saves along with various password problems.
We've now solved all of that. I 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 literally have like our own managed subscription page, which is sweet.
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 posts, two generated excerpt, one generated formats generated. Cool. Cool.
This tells me what they are now. And then we have access to all of our old posts. Awesome.
So now I'm just going to mobile optimize this and then run a 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 dash app API as well. So this isn't just a front end app for us anymore. This is entirely.
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 gonna lie, this is pretty solid as far as apps go. We now basically have something that's capable of doing everything that I want.
Last thing is, I'm just gonna paste in this security prompt. And just because we've done this, what, three times now, I'm not gonna bore y '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 back -end 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. I just did this because I traded off speed 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 you know, take three or four hours when realistically I could have done in 45 minutes.
So I'm not going to push the fast mode on you. It's just an option. 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 code base every few days, that sort of thing is going to add up pretty quick. For me, I'm happy to do it because of the arbitrage and then the value that I got to produce.
Hopefully you guys now see how to build an app just like this, not just a simple CRUD app, but a CRUD app that also has API wrapping functionality that does OAuth integration with social media platforms even, which are some of the most secure and difficult to authenticate and organize. And then finally, payments 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 want us 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, OK, that are probably interested in 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 vibe coding 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 high -level 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 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. They make courses on vibe coding and stuff, and 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 published 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.
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 five, 10, 20 years, 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. OK, 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 was like software moat, software as a moat. Same thing with like the Apple brand of computers. Same thing with like, I don't know, applications afterwards like Photoshop and like various databases and stuff like that.
Businesses that were built entirely off of software made sense like 30 or 40 years ago because software back then was very difficult to make, okay? Well, nowadays software is very easy to make as hopefully I've just demonstrated here over the course of the last six or seven hours or however long this damn course ended up being.
So we 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 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 moats 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. Where the moat is, is in distribution, which is fundamentally different.
And rather than play by the software moat playbook, like everybody and their mom is doing right now, I encourage you to play by the distribution moat 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 or anything like that. The reason why Netflix is not broke, you know, today is because Netflix contains within it distribution.
It contains a collection of clients, vendors, relationships, their staff, their team, their culture, and so on and so on and so forth. And these are things that an agent, until they hook it up to the cloning vats and start pumping out clients, vendors, and staff members, 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 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, you know, 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 hand.
Imagine that the entire life cycle of this vibe coded business that you are about to start is this hand. OK, and it traverses a whole 60 second length. Here is how much I'd recommend that you actually spend on the vibe coding part.
OK. Over the full 60 second life of your business, I would recommend you spend maybe three or four 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 three seconds or 1 20th or 5 % on building, you should spend the other 19 20th or 95 % on the marketing. I don't know if you guys have been in the build in public space on X. I used to be following that fairly frequently because it was just interesting to me how people would share their revenues and talk about the apps they're 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.
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 because 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 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 Venn 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. Only like 50 % of my opinions are actual reality. And so the only part of like this Venn diagram that I'm actually moving the needle for and like building features into my app that actually makes sense, okay, are over here.
But like the other 90 % is all bullshit. You know, it's all like, 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. ideally 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 vibe coded 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. 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. know this is kind of annoying because 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 five percent 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 high level 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 -sized businesses, my own agencies, digital marketing businesses, a couple of multi -billion dollar portfolio companies.
And 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 value based 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 competitors pricing. You know, I think a lot of people are like, well, I have to anchor to my competitors 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 what your competitor's price, rather than running 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 bids seven till you're at freaking zero.
What we do is we just establish how tremendously valuable the 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 a pittance. And I know this because I also purchase software.
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 non -material and so 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 bullshit admin task that admin task involves filling out some crm or whatever and on average every single day you have to spend two hours doing this okay so they're paying you a hundred dollars an hour you're doing an admin task that is worth two hours If you hypothetically could build a software solution that enabled 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 two times $100 an hour or $200 an hour. That is your direct expense.
But if you think about it, what do salespeople 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, I don't know, $500, then by saving two hours a day, Not only are you adding $200, sorry, $200 an hour, I meant $200. Not only are 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, things that actually produce for a company. And in practice, usually these expenses are much smaller than the total amount of opportunity costs, 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 costs them $50 a thumbnail, and they generate 20 thumbnails a month.
That means that by switching over to nixthumbnailcompany .co, also known as Thumbly, you'll save $1 ,000 a month. But when you take into account the time savings revenue, you move this two hours per thumbnail design period to five 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 is going to be different. Some people are going to produce way more value than your $2 ,000 a month estimate.
Others are going to produce less value. But because you can't price individually per every new customer that you onboard, you have to pick a specific package price. What we've done now is we've basically used facts and logic to work out what 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 high 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 zig 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, let's say, I kind of screwed up the 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, 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 reduce their 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 of a reasonable spread of values. And this is enough to get you started before 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, a pedal, an automation service, a backend tool, even like a big business deal.
Back when I was operating a content writing agency and we were trying to work out how much to price our product, 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 Nixco, and then I'd make 1000 % 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 Nixco, right?
Now, 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 said products. But that takes us to the next big thing, which is, well, there's pricing the product, but how do I actually get my product out there?
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 one -to -one communication between you and then 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 signups. I've also attached a video here that runs through how to do X, Y, and Z.
Let me know if you have any questions, if I can help you out at all, I'd 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, 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 X 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 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. But you know, it worked and it was what enabled me to make my first probably $150 ,000, $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 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.
What a lot of people don't realize is they'll watch some vibe coded 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're make content. um on the on the wider internet like on youtube or linkedin or instagram or whatever what you're basically doing is you're like in a sea of a billion people and then you're given a megaphone and then you're like okay i have a megaphone this is awesome and then what you don't realize is every other person also has a megaphone and then the big people that are pre -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 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. 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 Nixarife graph. Basically, this is the amount of time that it takes to see any sort of win.
And this is the amount of money that it takes. Okay. And I'm going to pretend that blue here is inbound.
I'm going to pretend that orange here is outbound. And you guys are going to see why I prefer outbound. In terms of the total amount of money you could make, 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 one 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 one for money before year one. 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 without bound. 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. And that's where business programs like, um, mine maker school and so on and so forth come into play. So I'll, I'll leave that with you and you guys could do whatever you want strategically there.
The third major way that you could market as somebody that develops and builds 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's arrive 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, 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, 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. 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 -win -win. As mentioned, it could 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 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, you know, doing the whole megaphone analogy.
That in reality tends to be the best of both worlds. Affiliate is also open to you at any level of the stack. So whether you guys are early on, whether you guys a little later on, I do highly recommend looking for those sorts of partnerships and then finding opportunities to 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 SaaS 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 SaaS stuff where basically people guide themselves through their onboarding checklist and stuff. you know, that tends to be more marketing. But hopefully this at least tells you guys a little bit about where the market is going and then how to practically take what I'm talking about here to improve the quality of your guys' lives, businesses, and so on and so forth.
Okay, that was a hell of a course. I had a lot of fun putting all that together. If you guys have made it to the end, y 'all are real ones.
I have 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. 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 bolder 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 in the next one. Thank you guys very much and have a lovely rest of the day.
The Hook
The bait, then the rug-pull.
The credential lands in the first ten seconds and the syllabus lands in the next two minutes, which is the whole pitch: no fluff, build alongside me, and by hour six you will have watched five apps go from an empty folder to a public URL. What makes it worth six hours is not the apps. It is the last hour, where the presenter argues that everything he just taught is the cheap five percent.
Named ideas worth stealing.
45:38list
The five holes in every vibe-coded app
- Exposed environment variables and API keys
- Missing or broken row level security on the database
- No server-side validation (trusting the front end)
- Outdated or hallucinated packages
- Missing authentication middleware on routes
The stated claim is that these five account for roughly eighty percent of security problems in AI-built apps, and that all five are addressable by pasting one audit prompt at the end of a build rather than by learning security.
Steal fora pre-launch checklist for any app you are about to expose to real users
1:03:19model
The vibe-coding build loop
- Find an inspiration design
- Optionally animate a hero asset
- Build the main functionality (the dashboard)
- Test locally against fake JSON data
- Move to a real database and test again
- Add authentication last
- Deploy, then run end-to-end tests again
- Build the landing page
Authentication goes last on purpose. Added first, the route protection only ever covers the pages that existed at the time, so every page built afterwards is unguarded.
Steal forthe default order of operations for any app build, human or AI-assisted
1:07:10list
The usual suspects stack
- Next.js for the front end and routing
- Supabase for database and authentication
- A serverless host for the backend functions
Chosen less for technical merit than for prevalence. Because these tools dominate public code, models produce noticeably better output when told to use them.
Steal forpicking a stack when you have no opinion and want the highest hit rate from an agent
1:13:00concept
Two-model split
One model writes the comprehensive architecture plan and later audits the finished code with no build context. The other handles design, component wiring and the visual pass. Never migrate mid-thread without first asking the outgoing model to export a full state summary.
Steal forany long build where one tool is clearly better at planning than at execution
3:32:22concept
Fresh-context review
Hand the finished codebase to a model that never saw it get built, exactly as a paper goes to a peer reviewer who did not write it. The model that did the work is biased toward defending its own decisions.
Steal forcode review, copy review, or any second pass where the author's investment would distort judgement
2:18:59model
Local, staging, production
- Local: client and server both on your machine
- Staging: real infrastructure, no customers
- Production: the version users touch
Skipping staging is what turns the last 0.1 percent of a build into the longest part, because deployment differences only surface once the code leaves your machine and the feedback loop lengthens.
Steal fordeciding when a deployment problem is worth catching before customers do
3:49:05model
The payment loop
- Sign up (authentication)
- Pick a plan or buy credits
- Payment succeeds and a webhook fires
- Backend flips entitlement on the user record
- Consumption decrements credits
- At zero, back to payment
The processor owns the card, the fraud checks and the tax receipts. Your app only ever reads a field on its own user record to decide what someone is allowed to do.
Steal forspecifying billing to an agent without needing to understand payment infrastructure
3:51:38list
Three monetisation models
- One-time purchase: flip a boolean forever
- Subscription: toggle access on each recurring payment event
- Credits: decrement a balance per action, force checkout at zero
Credit models suit anything with a real per-use cost, such as image generation, because the arbitrage between what a run costs you and what a credit sells for is the margin.
Steal forchoosing a billing shape before you write a line of payment code
6:01:16model
The 95/5 rule
Picture the whole life of the business as a sixty-second sweep. Three or four of those seconds go to building. The other fifty-six go to marketing. The older build-in-public advice of a fifty-fifty split is treated as obsolete now that anyone can produce the software.
Steal forsanity-checking how you are actually spending time on a product you have already shipped
6:04:45model
Value-based pricing
- Calculate direct expense savings (their old cost minus your cost)
- Calculate opportunity cost value (hours returned times what those hours earn)
- Add both to get total value created
- Charge ten to twenty percent of that number
Worked through with a thumbnail tool: a thousand dollars a month in tool savings plus a thousand a month in reclaimed time equals two thousand in value, so the product prices at two hundred and the buyer sees a ten times return.
Steal forpricing anything where you can name what the buyer currently spends and how long the task currently takes
6:12:02model
Tier construction from the top price
- Top tier at the value-based price with a ten times return
- Mid tier at roughly half price with an eight times return
- Entry tier lower again with a six times return
Set the top tier first from the value calculation, then work downward, reducing the buyer's return as the price drops so the top tier stays the rational choice.
Steal forbuilding a three-tier page before you have enough customers to run real pricing tests
6:13:35list
Three distribution channels
- Outbound: cold email and cold direct messages
- Inbound: content that builds an audience that comes to you
- Affiliate: rent someone else's existing distribution for a percentage
Outbound pays quickly then plateaus because every send costs time. Inbound pays nothing for roughly a year then compounds. The recommendation is to start heavily outbound and shift toward inbound once recurring revenue is stable.
Steal forsequencing marketing effort when you have more time than money
How they asked for the click.
VERBAL ASK
6:22:06product
“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.”
Held to the final ninety seconds after six hours of delivered material, and framed as an example of the offer construction the marketing module just taught. The free resource folder is offered separately and earlier, in the description and at the first build, so the paid ask is not the only exit.
MENTIONED ON CAMERA
Visual structure at a glance.
