Big Idea

The argument in one line.

Building a full-stack web app with login, payments, and a live database no longer requires writing code — it requires a systematic workflow: plan first, reference real designs, protect your API keys, and understand each layer as you build it.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You have used Claude Chat or ChatGPT but feel blocked by Claude Code because of the word "code".
You want to ship a web app with real functionality (auth, payments, database) and have no existing dev background.
You have watched vibe-coding tutorials but got lost once the jargon started — MCP, context window, repo, deploy.
You are thinking about selling a subscription product and want to see the full Stripe + Supabase setup in action.

SKIP IF…

You already deploy apps regularly and know how Supabase, Stripe, and GitHub work together.
You want advanced Claude Code workflows — this is explicitly a beginner guide and stays at that level throughout.

TL;DR

The full version, fast.

Claude Code intimidates non-coders because of technical jargon, but the actual workflow is approachable: use Plan Mode to define your app before building anything, give Claude a reference screenshot from Dribbble to guide the UI, connect services like Supabase and Stripe through MCP connectors, and store all API keys in a local .env file that Claude creates. The video walks through building a stock investment app (MarketCap) from an empty folder to a live deployed URL, demonstrating every core feature along the way. The central lesson is that understanding what each tool does — even at a surface level — makes the whole process faster and makes debugging far less frustrating when things break.

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 →

Chapters

Where the time goes.

00:00 – 00:47

01 · Intro / Hook

The word "code" keeps people away; this video builds something real to fix that

00:47 – 01:15

02 · What is Claude Code

Claude Chat gives answers; Claude Code builds things — same interface, outputs you can deploy

01:15 – 04:13

03 · How to Access Claude Code

Three paths: desktop app (recommended), terminal (most control), VS Code IDE

04:13 – 05:01

04 · What We're Building

MarketCap stock app — live pricing, watchlist, Stripe subscription, Supabase DB, hosted

05:01 – 05:48

05 · Connecting to a Folder

Every project needs a dedicated folder; Claude writes all files there for clean deployment

05:48 – 06:25

06 · Choosing AI Models

Opus for architecture; Sonnet 4.6 for 90% of work — major token savings

06:25 – 10:00

07 · Plan Mode + Meta Prompting

Plan Mode asks clarifying questions before building; give a reference URL; Claude outputs a full spec

10:00 – 12:15

08 · Context Window

1M tokens for Opus, 200K for Sonnet; compact vs. summarize-and-restart strategies

12:15 – 13:02

09 · Preview Tool

Claude self-runs and self-debugs the app before handing back — catches most basic errors

13:02 – 14:47

10 · In-App Browser + UI Edits

Pencil/annotate icons let you tap UI elements and request changes directly in chat

14:47 – 16:31

11 · Connecting an API Key

Finnhub free API key; Claude creates .env + .gitignore — never paste keys into chat

16:31 – 17:10

12 · Claude Connectors (MCP)

MCP connectors allow Claude to act inside Stripe, Supabase, Gmail, Canva directly

17:10 – 18:03

13 · Testing Live Pricing

MSFT search returns real-time Finnhub price; confirmed against Google Finance

18:03 – 21:17

14 · Supabase + Stripe Setup

One prompt sets up DB schema (auth + holdings table) and creates Stripe payment link via MCP

21:17 – 22:36

15 · Testing Stripe Payment

Test card number completes sandbox payment; Stripe dashboard confirms; user gets Pro badge

22:36 – 25:05

16 · Testing Auth + Database

Account creation, email confirm, login; Supabase table shows new profile + holdings rows

25:05 – 27:45

17 · Deploying to GitHub

41 files pushed to private repo via single prompt; API keys excluded automatically

27:45 – 30:30

18 · Setting Up Hostinger

Connect GitHub repo; import .env; auto-deploy enabled — every commit updates the live site

30:30 – 31:44

19 · Live Site Demo

Live Hostinger URL works with real pricing; auto-deploy confirmed; outro to follow-up video

Atomic Insights

Lines worth screenshotting.

Claude Code and Claude Chat use the same conversation interface — the only difference is Claude Code writes files and runs commands instead of just returning text.
Plan Mode forces Claude to ask clarifying questions before touching any code, which dramatically reduces wasted builds on the wrong spec.
Giving Claude a reference URL or screenshot from Dribbble produces better UI output than describing a design in words.
API keys should never appear in the chat window — always ask Claude to create a .env file and add it to .gitignore automatically.
MCP connectors let Claude act inside your Stripe or Supabase account directly — no manual dashboard work required for setup tasks.
Opus models carry a 1M token context window; Sonnet 4.6 carries 200K — switching models mid-project can silently drop important context.
Compacting a conversation degrades output quality; the better approach is asking Claude to summarize key context, then starting a fresh chat with that summary.
Claude's Preview tool self-runs and self-debugs the app before handing it back — most basic UI errors get caught automatically.
Deploying to GitHub is a single natural-language prompt once the files exist; API keys stay out of the repo via .gitignore.
Hostinger's GitHub integration means every commit auto-deploys — you never need to manually push to hosting again.
Understanding why each service is there (Supabase = database, Stripe = payments) makes future debugging faster when things inevitably break.

Takeaway

The workflow that turns a prompt into a deployed app.

WHAT TO LEARN

The bottleneck in no-code app building is not the AI — it is the order you do things and the habits that keep your project from breaking at the finish line.

Plan Mode forces Claude to ask clarifying questions before writing a single file — skipping it means building the wrong thing and rebuilding it.
Always give Claude a visual reference from Dribbble or Pinterest when starting the front end; describing a design in words produces far weaker results than showing a screenshot.
API keys belong in a .env file on your local machine, never in the chat window — one prompt creates both the file and the .gitignore entry that keeps it out of GitHub.
MCP connectors let Claude operate inside Stripe, Supabase, Gmail, and Canva on your behalf; the setup work that normally requires navigating dashboards becomes a single sentence in chat.
Use Opus only for initial architecture, complex bugs, and multi-step orchestration — Sonnet 4.6 handles 90% of daily build work at a fraction of the token cost.
When context gets bloated and quality drops, the fix is not compacting — it is asking Claude to summarize all critical context, then starting a new chat with that summary pasted first.
Claude's Preview tool self-runs and self-debugs the app before handing it back; most UI-layer errors are caught automatically without you filing a bug report.
Connecting GitHub to a hosting provider like Hostinger enables auto-deploy on every commit — once configured, you never need to manually push to production again.
Understanding what each service does at a conceptual level — Supabase stores data, Stripe handles money, GitHub holds files — is what lets you debug when things break, not just follow instructions blindly.

Glossary

Terms worth knowing.

MCP (connector): A protocol that lets Claude connect to and act inside external apps like Stripe, Supabase, Gmail, or Canva on your behalf, without you logging into those dashboards manually.
Plan Mode: A Claude Code setting that makes the AI ask clarifying questions and produce a full build plan before writing any code, reducing wasted work on the wrong spec.
Context window: The maximum amount of conversation history Claude can hold in memory during a single session; Opus gets 1M tokens, Sonnet 4.6 gets 200K.
.env file: A hidden local text file that stores API keys and secrets; it lives on your computer only and is excluded from GitHub uploads via .gitignore.
Supabase: An open-source database platform with built-in authentication and row-level security; used here to store user accounts and portfolio holdings.
Sandbox mode (Stripe): A testing environment where payments use fake card numbers and no real money moves, used to verify payment flows before going live.
localhost: A URL that only works on your own computer; it means the app is running locally for testing, not yet accessible to anyone else on the internet.
Meta prompting: Asking an AI to help you write a better prompt before you actually build anything — useful when you lack domain expertise on what you are building.

Resources

Things they pointed at.

14:47toolFinnhub ↗

18:03toolSupabase ↗

18:03toolStripe ↗

25:05toolGitHub ↗

27:45productHostinger ↗

10:00toolDribbble ↗

10:00toolPinterest ↗

00:00linkThe Breadcrumb (newsletter) ↗

Quotables

Lines you could clip.

00:00

“Claude Code is one of the most powerful AI tools out right now, but a lot of people are avoiding it for one reason. It has the word code in it.”

Immediate hook — names the exact fear and inverts it in one sentence→ TikTok hook↗ Tweet quote

06:21

“For 90% of my projects, I always use Sonnet 4.6.”

Concrete, quotable model recommendation from a practitioner→ IG reel cold open↗ Tweet quote

20:19

“You wanna make sure that you actually understand the things that it's doing and not just blindly following the instructions and just hitting go.”

Contrarian beat in a tutorial about automation — warns against mindless vibe-coding→ newsletter pull-quote↗ Tweet quote

12:07

“It's actually fixing its own errors and it's doing a lot of the work here. This is mind blowing.”

Genuine reaction shot — captures the beginner awe moment most viewers will feel→ TikTok hook↗ Tweet quote

The Script

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.

00:00Cloud Code is one of the most powerful AI tools out right now, but a lot of people are avoiding it for one reason. It has the word code in it. Especially when you're seeing terms like m c p, skills, repos, it can feel quite intimidating.

00:12So in this video, I'm gonna give you a non technical beginner's guide to Claude code, but this won't be a boring checklist video where I just go through a bunch of terms. But instead, we're gonna actually build something together, and I'm gonna explain each concept as it comes up in plain English.

00:27So by the end of the video, you'll understand what Claude code is, what all of these confusing terms mean, and how you can start using it to build real applications even if you've never written code before. And I'm gonna be including time stamps down below, so if you already understand a particular section, you can skip ahead.

00:42Now before we start, I want to explain what Cloud Code is and how it's different from Cloud Chat. So if you've been using ChatGPT or Cloud Chat, you're basically asking questions to the AI and it comes back with an answer. But with Clog Code, not only that you can ask questions, but you're able to build things like websites, applications, and tools.

01:02And despite the word code here, you're not actually writing any code, but you're talking to it the same way that you would in Clog Cloud Chat. Right? So you think of Cloud Chat as a tool that gives you information and Cloud Code as a tool that helps you build things.

01:15And what makes Cloud Code even more powerful is that it can connect to apps that you already use through something called connectors. So this means that you can connect to apps like Gmail, Slack, Canva, and a bunch of other tools. And these are the apps that you probably already use on a daily basis.

01:30And once you enable that connection, you can start to create very interesting automations like replying to your emails, designing banners through Canva, and some other things that you probably never thought was possible. Now there are three main ways that you can access Cloud Code. The first way is through the official desktop app here.

01:47Right? Cloud has its own desktop app and inside you will see chat, co work, and code. And this is probably the easiest way to start because everything is more visual here.

01:56Now the second way is through a terminal. Right? And terminal looks like this.

02:00And I know for most beginners this is probably gonna look very intimidating, but this is how actually a lot of developers use Cloud Code because it gives you the most amount of control. Now the third way is through an IDE, which stands for integrated development environment.

02:13So this could be something like Versus Code, anti gravity, or cursor. These are the tools where you can open your project, you can see all your files and folders, and you can use Cloud Code inside of that environment.

02:23Now Versus Code is probably the most popular one and big reason why a lot of people like using Cloud Code inside of Versus Code is because you can spin up a Cloud Code section in the middle and you can immediately see the files that is created on the left side here and you can watch everything happen as it builds the apps for you.

02:40So I think what it comes down to is control. Right? So the terminal gives you the most amount of control, but it's also the most intimidating if you're just starting out.

02:49The desktop app gives you less raw control, but it's a lot easier to understand visually. But honestly, cloud has been making a lot of updates to the desktop app compared to even couple months ago. It feels a lot more integrated now.

03:00You You can preview what you're building on the right side, you can use the browser, you can look at your files, and you can do a lot more directly inside of the app. So if you've been watching other tutorials where people are using terminal or Versus code, now you know what you're looking at. Now I think for most people, the desktop app is more than enough.

03:17So in this video, I'm gonna show you how everything works inside of the Clot desktop app. Now the next thing that you need is a Clot subscription.

03:24If and if you are doing this for the first time, I'd recommend starting with the cheapest plan here, $17 a month. And I think this is good enough for most people when they're getting started. And once you start building more things, you can upgrade to the $100 plan that gives you five times more usage or even the $200 plan with 20 times usage.

03:41Now speaking of usage, this is something that you wanna pay attention to as well as you're building your app. If you go to settings and usage, you're gonna be able to see your usage here. So even though you're on a monthly plan, the limit resets weekly and it also resets every five hours.

03:55And I know that's confusing at first, but you can monitor the progress here. So if you're working on something and you hit your limit, just be aware that it won't be long until you can use it again. And also there's a couple ways that you can conserve your usage, so I'll be sharing some of those tips throughout the video.

04:09Alright. So I'm gonna start building something so you can see all these features being put to use. So rather than giving you a boring checklist of tools that Cloud Code has, I'm actually gonna build something so you can see all these features being used live.

04:22I think that's a better way to learn. And today we're gonna build a simple web application, so maybe like a stock investment app where you can put in a ticker symbol and it gives you live pricing stocks just like what you see on Yahoo Finance or Google Finance. And I'm also gonna show you how to add an API to get the live pricing of the stocks and how to even connect to Stripe for taking payments.

04:43So if you're charging people a monthly subscription, I'm gonna show you how to add that into your web application. And I'm also gonna show you how to set up a database and how to connect everything together, and finally, how to deploy that to the web, how to connect to a hosting provider, and make it live so everybody can access your website.

04:59Alright. So I am on the desktop app now. If you don't have this already, please download it.

05:03And before I start a project, I like to connect to a folder. So if you look to the bottom left here, you see that I'm connected to this folder so you can click on this and open folder.

05:14So as you can see here, I have connected this folder that I just created, basically a blank folder with just one image here and you wanna do this for every project that you create Cause this is a place where Claude is going to create all the files related to this app. And when it comes to publishing or deploying your app, it's gonna be a lot easier because it's all gonna be in one place.

05:35So so if you wanna create a new folder, can just click on new folder, but in this case, I already have this one here, so I'm gonna click open. And then you can see the folder name populate here. Now on the bottom right, you will see that you can select models here.

05:48So Opus 4.8 just released today actually when I was recording this video. I don't think that you need to use the best model for every task because, again, if you're not on the max plan, you're gonna burn through your tokens very, very quickly.

06:02So for me, I only use the Opus models when I'm orchestrating the app, when I'm building the structure of it, or when I'm asking it to think of complex problems. Or maybe if there's an error that Sonim cannot fix, then I will switch to Opus to help fix the issue. For so for 90% of my projects, I always use SANA 4.6.

06:21Now before I start any project, I like to plan and structure the application. You don't wanna just give it one prompt and ask it to build it immediately. So here on the bottom left, you can actually click on plan mode, and this allows Claude to ask you clarifying questions before it builds anything.

06:36So essentially, you're having a chat with Claude to determine the features that you want in the app and how to actually structure the whole app before actually building anything. And this is called meta prompting. So meta prompting basically means that you're asking the AI to help you create the best prompt, and this is a good exercise especially if you don't have domain expertise on the app that you're building.

06:56Even And if you're confident on the subject matter, I think this is a good exercise just to brainstorm with Claude and you'll start to uncover a lot of new things that you might wanna implement on the apps. So I have this prompt ready here. I'm gonna paste it here.

07:07I wanna build a stock investment app similar to this app here, Google Finance, basically. Right? So Google Finance just looks like this and it's just a simple page where I can put in my ticker symbol here and it will give you the pricing and also you can see some news here and you can add these stocks to your portfolio and save it.

07:25And let's call the app market cap. It has live pricing news and the ability to save stocks in my portfolio. List out the features I should have and map out the plan and how we're going to build the app and ask me clarifying questions.

07:36And I'll just go and hit send. So as you notice, for every project, I like to give it some kind of reference. Right?

07:41Whatever app that you're trying to create or build, there's probably already something out there that already exist. So by doing this, you're telling the AI to actually look at this reference website, study the features they have, and maybe try to suggest new unique features that maybe you can add to your to make it unique.

07:57Now because you're on plan mode, Cloud is actually going to give you a lot of these questions before actually building anything. Right? So first question it's asking is what should market cap actually do with stocks?

08:06Track only? Is it gonna just watch live prices, read news, or you wanna do paper trading or real trading?

08:12No. I just want this one. And what platform should we build for first?

08:15So are we building a web application, mobile app, or desktop app? So obviously, we're gonna do this one, which is also recommended here. So click on this.

08:22And where do we get live pricing? News data. So free API, FinHub, Alpha Vantage, paid API.

08:27Okay. We're gonna go with free one, obviously. So just me single user or multi user accounts.

08:32So, obviously, we want other people to be able to sign up. So we're gonna connect to super base authentication and role level security. So we do want this one.

08:38So it's more complex, but that's what this tutorial is for. Right? So click on this and then it's going to do a bit more thinking.

08:46And now it's giving me a full plan. Right? So on the right side here, it's pulled up a new window inside the app.

08:52So market cap build plan. Right? Jason wants to build market cap, stock investment app model after Google Finance.

08:57So and down here, you'll see that we've got four bullet points here. Uh, what are we gonna do? We're gonna track the prices only.

09:03There's no buying or selling. What kind platform we're gonna build? And then where we get the API from to get the live pricing and also the ability to add users.

09:11Right? And if you scroll down, you're gonna see more detail on what the features that we're gonna have on the app, which I think looks really good.

09:18This is everything that I was thinking about actually. So, yep. It's gonna be responsive as well.

09:24Got live pricing, got the news feed, and the ability to add stocks to your own portfolio. Nice. So these are the tech stack as well and they look correct to me.

09:33And if I go down here, you'll see that there are two things that I need to provide which is the API key and confirm the super base project, which is what we're gonna get to later on. Alright.

09:43So I'm gonna approve the project, but before asking it to build everything, I just wanna see the visual. Right? I wanna see what the app will look like because for me, I like to build out the front end first, approve the design, and then have it build the back end to connect all the functionality.

09:56Now in order for it to come up with a good design, you need to have references. Right? Now I like to go to Dribbble here to find design inspiration, so I search for investment app here and you'll see tons of examples here of beautiful looking designs that you can just grab and bring it to Claude for reference.

10:13Or if you can find anything you like, you can also go to Pinterest there. So if I type in investment web app, you'll also see a bunch of designs that you can choose from and I was just doing this earlier and I found this one that I quite like. So so I'm gonna click on this, make it bigger and then I just save as image and then save it here in the folder that we created, market cap app.

10:34Right? And this is actually the reference image that you probably saw I have in that folder. So I'm gonna go back to Claude and then give it this prompt.

10:41Right? Before we build the app, build the front end dashboard. There's a reference image in that folder.

10:46Want the app to follow this design and then hit send. Now while this is working, I think this is a good time to talk about the context window. So you'll hear this term a lot and that just means that there's a limit on how much memory Claude can retain in a single chat like this.

11:00So you'll see this icon here, and if you click on that, you'll see that this particular session has 1,000,000 context window, and we've used about 56,000 here. So that's about 6%.

11:10Right? Now the way this works is that whenever you ask a question or whenever you prompt something new, Clot is actually going to read every single thing in this chat session all the way from the very beginning. So the longer your chat is, the bloated it becomes and the slower it gets.

11:25Right? So there is a max of 1,000,000 tokens here, which is quite a lot actually, and and that's because we're using Opus 4.7. But if you are using Sonar 4.6, you only get about 200,000 contacts window, which is a lot smaller.

11:37But when it gets to that point, what you wanna do is you actually going to compact the conversation. Right? Compacting means it will only retain all the important things in this conversation.

11:46Now for me, what I find is that even after you compact the conversation, the quality dips, it forgets a lot of different things. I'll just ask it to summarize all the information that is important and crucial, and then I'll start a brand new chat and I'll just copy that information. And because we're working in this particular folder, it has all the files that it needs to get more context.

12:07And don't worry, it will actually make sense the more that use Claude, but that's basically how context window works. Alright. So now after a few minutes, it's starting to finish up the visuals here.

12:16And if you look here, it's actually using Claude preview here, which is basically an internal tool that Claude has, which will test the app that is building by itself before handing it to me, right, which is good. And this one in particular is checking whether dark mode works. So here it does an error.

12:31Dark mode is not applying. Let me inspect the DOM state to debug. So it's actually fixing its own problems here before handing it over back to me to inspect.

12:39So this is mind blowing. Right? It's actually fixing its own errors and it's doing a lot of the work here.

12:43Alright. So it looks like this is done. So you'll see that the front end dashboard is built and matches the reference design.

12:49It's running at local host 3,000. Now you'll see this a lot. Right?

12:52Local host simply means that it's only running on your computer. No nobody else has access to this because you're just doing a demo, you're testing things out. Right?

13:00Now there are two ways that you can inspect the app. One is through the in app browser here. So let me close this out so I can make this thing bigger.

13:08So Claude has an in app browser here. So this is actually a browser that you can scroll down, and this is actually a web application, not a mobile app. It just looks this way because it's squished together.

13:18Right? So the other way is actually opening this up on your Chrome browser.

13:22So if I click on this, I can see the full application here, which is a lot easier to see. So let me zoom out here.

13:28And this follows exactly the reference image that I gave it, so that's a good thing. And all of this obviously is dummy data. We haven't connected the API for pricing.

13:37And if I scroll down here, let me check dark mode, light mode. Yeah. That works.

13:41Right. So I think this is just visuals, which is already looking very good.

13:45Now the reason why I like having the in app browser here is because if I wanna make changes to any of these elements here, I can just click on either this, the pencil icon here, and I can just circle and then I can click add to chat and I can make changes. I can say, change this to green, change this to red, or whatever I want.

14:03Right? Or you can also click on the second icon here which is the annotate icon. So if you click here, you'll see that it's gonna select each UI element, the exact one actually, and this is actually more accurate than just scribbling on the screen.

14:16So let's say I wanna change this portfolio value to say total value instead, so I can just click here and change text to total value.

14:26Right? And you can do this to change the text or change the colors, change the font size, anything you want basically. And there you go.

14:33Now it's changed the text to total value. Now you're gonna see that all these prices are still dummy data. So the next step would be to get a free API to connect it to this app here and get live pricing.

14:45Alright? So that's very easy to do as well. So it's actually recommending me to go to FinHub live data here to get the free API key so we can connect it to the cloud.

14:53Right? So I'm gonna go to this website here and just sign up for a free account. And once you sign up, you'll have this API key here that you can give to Claude.

15:02So think of API key as like a password. Right? So this is a secret key that you actually don't wanna give to other people because this one is free.

15:10But if you are giving an API key out for, let's say, an app that you're paying for, and if you get this post, you're going to be paying for everything basically. Right? So anybody can steal this.

15:19So you wanna copy it here and you wanna keep it in a safe place. And I'm gonna go back to Claude, and I'm going to say, I'm ready to connect to Finhub to get live pricing. I have the API key ready, set up the environment file and git ignore so I can paste in the API key.

15:33So you don't wanna copy the API key here on the chat because if your chat get exposed then, like I said, everybody can access your API keys. Right? So what you want to ask Claude to do is actually to set up EMV file, which is basically just a text file that lives on your local machine, and you also wanna set up git ignore so it doesn't get pushed to GitHub when you actually deploy the app.

15:54And dot env is basically an environment file. It's basically just like a text file that you keep all your passwords in. And again, it lives on your local machine and it doesn't get uploaded to GitHub.

16:05So hit enter here. Alright. So it's created the dot env file inside of the git ignore.

16:10So I can just simply click on this and then it'll open up like a text file here and you can simply paste in the API key right here. And once you do that, you can just click done, and it's gonna try to connect to the API and actually wire up the functionality of the app. So I'm gonna let it work for a few minutes, and I think this is a good time to talk about connectors.

16:30Right? So if you click down here, plus icon, go to connectors, you will see that I've connected to Stripe and Supabase and also Cloud and Chrome.

16:38Right? So if I go manage connectors, you'll see that Cloud can actually connect to all these popular apps here.

16:44So for example, if you're connecting to Gmail, Cloud can actually draft replies. You can actually respond to your emails. If you connect it to Canva, Claudette can actually create designs for you without you having to manually go to Canva and actually perform those jobs yourself.

16:58Right? Now in our case, I've connected to Stripe and Superbase because we're gonna use Stripe to accept payments, to create payment links, and we're gonna use Superbase to connect a database and store all the user's information. Right?

17:10Alright. So it looks like it's done, so I'm gonna test it out. Instead of testing it here, I'm gonna open my Chrome browser again, and I'm just going to hit refresh here.

17:18Okay. And I'm gonna test the API if that works. Right?

17:21If I click here and let's say I wanna search for Microsoft MSFT. Yep. There you go.

17:26So it pulls all this information from Finhub. Click on Microsoft and there you go.

17:32So it's got the pricing. It even has the chart here. This is not available for some reason.

17:37One month, three months, and one year, and you can hover around here for pricing. And then if you look down here, it's actually pulling all the news as well, so that is awesome. And just to make sure that this is actually the correct price, if I go to Google and I search on MSFT, yeah, $4.26.

17:54So that is the correct pricing, which is good. Alright.

17:57So next, we're going to add a functionality where the user can actually save the stocks to their portfolio. Right? And in order to do that, you're gonna need to set up a database.

18:06So database is simply a place where you can store users information like the stocks that they have saved to the portfolio. So think of it like an Excel spreadsheet where if you were to do this manually, let's say you have 10 customers.

18:17Right? Each customer has different stocks in their portfolio. These 10 different customers have different stocks that they've added to their portfolio.

18:24So you want a way to be able to store that information, and we're gonna use Superbase to manage the database for us.

18:31Now at the same time, we're also going to add a pricing plan here because most likely than not, if you are building an app like this, you're gonna charge a subscription. Right? You wanna charge a monthly fee to be able to to access premium features.

18:42So for this example here, we're gonna use scribe to accept payments and I'm gonna show you how to do that in Cloud Code. So here's the prompt that I'm gonna give to Cloud. Right?

18:51So I'm gonna do two things at once, which is to set up the database and also payments. Right? So for database, set up a database with Superbase.

18:59I have the SCP connected. I just wanna have the ability for users to log in and save stocks to a watch list. Right?

19:05Users can only see their own stocks. And for payments, I also wanna build a pricing page with two plans, the free plan and also a paid plan. Let's say, we wanna charge $20 a month.

19:17You wanna allow users on this plan to save stocks to their watch list. Right? Set up Stripe recurring payment.

19:24I have Stripe MCP connected. Create a dummy pricing page so I can test the payment in sandbox mode. Sandbox mode means that it's, uh, this testing mode.

19:33It's not live payment, so you can, you know, put in a random credit card number and just wanna test if the payment goes through. Right?

19:41And I've authenticated myself to both Stripe and Superbase. And if you're wondering, the word MCP just simply means that it's a connector. And, of course, if you're doing this for the first time, you do wanna create a free account in Superbase.

19:53So I have my own account here. It's free to sign up. So as you can see, I have this project that I have already.

19:59And, of course, you also want to have a Stripe account. Right? So set up Stripe.

20:02And right now, I'm on test mode here. So if you already signed up for Stripe and you want it to be on the sandbox mode for testing, you wanna click here and just click switch on sandbox mode.

20:13So I'm gonna hit go here and gonna let it work. Now it's gonna check Superbase and Stripe simultaneously, and it's probably gonna ask you for API keys to be able to connect to those tools.

20:23So you can just follow instructions. And one tip I can give you when you're vibe coding, you wanna make sure that you actually understand the things that it's doing and not just blindly following the instructions and just hitting go because it's really easy to do that.

20:36Right? But I think it's really important to understand every concept and why it's doing certain things. Right?

20:41Why you wanna use a database? Why you're in sandbox mode? And if you don't understand what a database is, you can just ask it, hey.

20:47What is a database? Why do we need this? Or why do we use Supabase and not other tools?

20:51So these are the things that you can actually ask Claude to explain to you, and you can ask it to explain it to you in plain English so you can actually understand this concept. So the moment it comes up again next time, you already know what to do and it gets a lot easier then. And most importantly, you understand what you're building because if something breaks in the future, you already understand the structure of the app and how things work together, and it's gonna be a lot easier to fix.

21:12And I think that's a better mindset to have when you're vibe coding. Alright. So So looks like everything is done now.

21:17Let me check this out. I go to my browser again. Let me refresh the page.

21:21And now if I go to pricing on the left here, it's created this new page here with two plans, free and pro. And if I click on upgrade to pro, it's actually created the payment link in Stripe as well. So if you're wondering how this was set up, actually, if I go to my Stripe account and again, I'm on sandbox mode here, so all of this is dummy data.

21:41If So you were to create that payment link manually, you would go to payment links here and you would create a test payment link. Right? But as you can see, Claude actually created this payment link for us because we have the MCP connected and it was able to go into our Stripe account without me having to do this manually.

21:59Now if you're doing this for the first time, when you connect your Stripe MCP to Claude, it's going to ask you to authenticate your account and also it's going to ask for your API key so that Claude can talk to this particular account. Right? And to get the API key, you can go to settings and you can go to developers and click on manage API keys and it's gonna be these ones on the bottom here.

22:21And, again, you wanna save this in the ENV file so that it doesn't get leaked to the public. Now before I test this, wanna go back to the home page and I wanna try logging in because Supabase is connected now and I can start to create my own account. Right?

22:36So if I go back to this pricing page, even if I click on get started free, it's gonna prompt me to create an account and let's see if I can create account here. Click enter.

22:47No. Thanks. Alright.

22:48I'm gonna confirm my account real quick and then I'm gonna log in again, sign in, and I'm in. So that login works And if I wanna check whether the database is connected, I can go to super base now.

23:00And I already have this project here, but if you're doing this for the first time, obviously, you wanna click on new project, and then you would just create new project. But this is a particular project that we're working on, so I'm gonna click on this one. And I'm gonna click on the table editor here and I wanna click on profiles here and you can see that this is the account that I just created.

23:18Right? So it shows up here so which means that it's connected. Right?

23:21Now if I go back to our website here and I click on this top Apple, now I wanna click on add to portfolio. Now since this is a pro feature, right, it just triggered me to upgrade.

23:32So if I click on this, so it gives you this pricing page and it's gonna ask me to upgrade to pro. So if I click on this, it's gonna go back to the Stripe page that we created earlier. And since this one is just a test link, I also wanna make sure that this works right.

23:45So I'm gonna put in my email and then I'm going to check if this works and I'm gonna paste this random number here and this is something that you can use to test out your payment links for your Stripe account, and then fill out the name as well and the country, ZIP code, and hit subscribe. And if I go back to Stripe, I'll see that that transaction actually went through here, succeeded.

24:04Now if you go back to the website, you can see that I am now upgraded it to pro and with this batch right here. And now I wanna check if I can start adding stocks to my portfolio and then I actually wanna see it displayed on database as well to just verify that everything is connected properly.

24:22So if I just click on this stock here, Google, and let's say I wanna add this to my portfolio, click on add to portfolio. Yep.

24:30There you go. So I can add more shares here. A 100 shares, maybe a thousand dollars, and then hit add to portfolio.

24:38Yep. Add it to portfolio. Uh, let me add a couple more just to make sure that this works.

24:43Netflix, add to portfolio, 20 shares, $500, add to portfolio.

24:49Yep. There you go. And on the left here, have a page called portfolio, so I can click on this and I should be able to see the two stocks that I just added which are all here.

24:58Perfect. Now I also wanna make sure that this is not just displayed on the website, but also saved in the database that we just created. So if I go back to super base again, I go to table editor, and it actually created a new table here called holdings.

25:13So here you'll see the two stocks that I just added, Google and Netflix here, and including the shares, the cost basis, and this is connected to this user which is the user that I just created. And if I wanna check who this is, I can go to profiles here and I'll see the user ID here as well and the email address. So that works.

25:30Now of course, you can continue to build this out, you know, you can change all these pages and make it really, really nice, but I think for the purpose of this demo, I think this is pretty good enough. And now the next step is how do you actually get this live on the Internet.

25:43Right? Because all of this is still sitting in your local machine and nobody can ask and and nobody can see it except for you. And you wanna take all the files that Claude has created for you for this app and you wanna upload that into something called GitHub.

25:56Right? So you hear this a lot, GitHub. What is GitHub?

25:59For those of you who are not familiar, GitHub is basically a place where you can store all your code base for your app on the cloud so you can deploy this on Internet. And GitHub is also a place where you can do version control. So when you're building an app, you gotta make more changes, you gotta make updates, and when something breaks, you can revert back to the time that everything was working correctly, and you can do that with GitHub here.

26:21So you can think of GitHub like a Google Drive. Right? So if you wanna share files with another person, if it's sitting on your computer, nobody can see it, but if you save it on a Google Drive, it's now gonna be saved on the cloud, and you can just share it with a simple link.

26:33And this works kinda the same way but for quotes. Right? Now you wanna create a free account on GitHub and then you wanna create a new repo.

26:39Right? So you can click on new and you wanna just name it here.

26:43So I can call it market cap app, and then you can choose whether to make it public or you wanna keep it private for now, you can do that as well. So I'm gonna keep it private for now and then I'm just gonna hit create repository. And once that's done, you wanna grab this link here and basically this is the link to this repo here that you wanna give to Claude so Claude can upload all the files directly here.

27:05So I'm gonna go back to Claude. I can simply say I'm ready to publish, connect to my GitHub account and push to this repo and then I want to just paste the link that I got from GitHub.

27:15Now if you're doing this for the first time, you want to authenticate yourself, it's gonna ask you for some keys and just follow the instructions but that is just one time. And since I've already connected before, can just simply do this and then I'm gonna hit go.

27:28Alright. So looks like it's done. 41 files pushed to the GitHub repo and API keys are not included.

27:34So perfect. So if I go back to GitHub here, I can see that all the files are actually here. Now the next thing to do, which is the last piece of the puzzle here, is actually to get this live on the Internet.

27:43Right? And we're gonna need web hosting for that. And for this, you can use any web hosting you want.

27:48But today, I'm gonna use Hostinger, which is kindly sponsoring today's video. And I've actually been using Hostinger for years for a lot of the websites that I've built. It is up to nine times cheaper than traditional hosting, and you get a free domain for one year.

28:00You get a business email. And the nice thing about this particular hosting is that it automatically connects to GitHub, so any changes that you make to your code or to your app, it automatically updates on Hostinger without you having to do anything manually. So I'm gonna provide the link for you guys to access this page here.

28:14So once you land on this page, wanna click on the view plans. So you'll see two different plans here, business and cloud startup. You can choose business, it gives you five managed web applications.

28:24If you wanna build more apps, you can definitely go for the cloud startup which gives you 10 web applications and up to a 100 websites. And by the way, these plans are not usage based, it's a fixed monthly cost so you'd know exactly how much you'll be paying every single month for this.

28:37So today I'm gonna choose the business plan here and I click on choose plan and you're gonna land on this page where you can pick the period here. Obviously, if you sign up for a longer plan, it's gonna be the cheapest. So I'm gonna pick forty eight months here for $3.99 a month.

28:51And then you also get a free domain here for one year, so you can choose any of these domains here. And also if you use my code lee jason, you're gonna get additional 10% off the entire plan, so it's even cheaper. Now you wanna hit continue.

29:04And once you're here, you can go to websites and you gotta go to node. Js and click on deploy your node. Js website in minutes.

29:10So click on get started and then make sure that you have business web hosting selected, hit continue. And here's the step where you wanna connect to GitHub. Right?

29:17So it's gonna be able to pull all the files from this GitHub account to Hostinger. Right? So I'm gonna click on continue to GitHub and then you wanna authorize this connection as well.

29:25And here you can select all repos or you just wanna select the particular repo that you wanna connect. So in this case, I'm gonna click this one and I'm going to find the one that we just created. We just mark it cap app.

29:35Right? And I'm gonna hit install and authorize and then I'm gonna verify and there you go.

29:39My repo is now here. I can just click on this and hit continue. Now once you're on this page, you wanna pay attention to this thing called environment variables down here.

29:47So this is basically the API keys that allows you to pull up live pricing, make payments through Stripe, and also connect to a super base. Right? So you wanna add this and you wanna just add the API keys here to each of those services or if you don't want to do this individually, can just hit import dot ENV file.

30:04Click here and you wanna just go to that folder and it should be in that folder. Now dot env file is a hidden file, so if you're on a Mac, there's one way to make that visible which is to hit command shift and period and you'll see that dot env file here. So just click on this file and then hit open.

30:23And then it's gonna automatically populate all the API keys inside of here. And then you wanna hit finish and then hit deploy. And in this couple of minutes, it's done.

30:31Right? So you can just click on this temporary domain here and your website is published. Right?

30:36So this is a temporary domain, obviously, you look at the URL here. And you can change this domain to anything you want with Hostinger. And if you share this link, anybody can access this website.

30:46And if you even check whether this thing works, yep, so the live pricing works as well. I can pull up first stocks here and it's working properly.

30:55And one thing to note here because it's connected to GitHub automatically and you have auto deployment on here, and what's gonna happen is that when you make changes to your app and when Claude pushes all the new files into GitHub, and Hostinger will actually detect that there are changes made to that repo. So it's gonna pick it up and it's gonna auto deploy the website to reflect the latest changes.

31:15And I think that's a nice feature to have so you don't have to keep manually deploying your website. So I hope you guys can see what the basic workflow looks like when you're building an app with Cloud Code. The next time you see someone build an app, you know exactly what all the terms mean and it's gonna be a lot easier to follow.

31:30Now of course what you see today, it's just a demo app, but if you guys wanna watch me build a real app, recently I made a video on how I built a calendar booking app called Calendly completely from scratch. So if you wanna watch that, you wanna click here and I'll see you guys there.

The Hook

The bait, then the rug-pull.

The word "code" is doing a lot of damage. Most people who could benefit from Claude Code never try it because the name implies you need to write code — and this video exists to prove you don't. In 31 minutes, Jason Lee goes from an empty folder to a live, deployed stock investment web app with real-time pricing, user login, Stripe subscriptions, and a Supabase database, touching none of the underlying code directly.

Frameworks