How I Vibe Coded a Full App using Claude Code (with Database, Payment, Login) — Transcript

Full transcript

1. 0:00Cloud Code is one of the most powerful
2. 0:01AI tools out right now, but a lot of
3. 0:03people are avoiding it for one reason.
4. 0:05It has the word code in it. Especially
5. 0:07when you're seeing terms like MCP,
6. 0:09skills, repos, it can feel quite
7. 0:12intimidating. So, in this video, I'm
8. 0:13going to give you a non-technical
9. 0:14beginner's guide to Cloud Code. But,
10. 0:16this won't be a boring checklist video
11. 0:18where I just go through a bunch of
12. 0:20terms. But, instead, we're going to
13. 0:21actually build something together, and
14. 0:23I'm going to explain each concept as it
15. 0:25comes up in plain English. So, by the
16. 0:27end of the video, you'll understand what
17. 0:29Cloud Code is, what all of these terms
18. 0:31mean, and how you can start using it to
19. 0:33build real applications, even if you've
20. 0:35never written code before. And I'm going
21. 0:38to be including timestamps down below.
22. 0:39So, if you already understand a
23. 0:40particular section, you can skip ahead.
24. 0:42Now, before we start, I want to explain
25. 0:44what Cloud Code is and how it's
26. 0:46different from Cloud Chat. So, if you've
27. 0:48been using Chat GPT or Cloud Chat,
28. 0:50you're basically asking questions to the
29. 0:52AI, and it comes back with an answer.
30. 0:55But, with Cloud Code, not only that you
31. 0:57can ask questions, but you're able to
32. 0:58build things like websites,
33. 1:00applications, and tools. And despite the
34. 1:03word code here, you're not actually
35. 1:04writing any code, but you're talking to
36. 1:06it the same way that you would in Cloud
37. 1:08Chat, right? So, you think of Cloud Chat
38. 1:10as a tool that gives you information,
39. 1:12and Cloud Code as a tool that helps you
40. 1:14build things. And what makes Cloud Code
41. 1:17even more powerful is that it can
42. 1:18connect to apps that you already use
43. 1:20through something called connectors. So,
44. 1:23this means that you can connect to apps
45. 1:24like Gmail, Slack, Canva, and a bunch of
46. 1:26other tools. And these are the apps that
47. 1:28you probably already use on a daily
48. 1:29basis. And once you enable that
49. 1:31connection, you can start to create very
50. 1:33interesting automations, like replying
51. 1:35to your emails, designing banners
52. 1:36through Canva, and some other things
53. 1:38that you probably never thought was
54. 1:40possible. Now, there are three main ways
55. 1:42that you can access Cloud Code. The
56. 1:44first way is through the official
57. 1:46desktop app here, right? Cloud has its
58. 1:47own desktop app. And inside, you will
59. 1:49see chat, co-work, and code. And this is
60. 1:52probably the easiest way to start
61. 1:53because everything is more visual here.
62. 1:56Now, the second way is through a
63. 1:58terminal, right? And terminal looks like
64. 1:59this. And I know for most beginners,
65. 2:01this is probably going to look very
66. 2:02intimidating. But this is how actually a
67. 2:04lot of developers use Cloud Code because
68. 2:06it gives you the most amount of control.
69. 2:08Now, the third way is through an IDE,
70. 2:10which stands for integrated development
71. 2:13environment. So, this could be something
72. 2:14like VS Code, Anti-gravity, or Cursor.
73. 2:17These are the tools where you can open
74. 2:18your project, you can see all your files
75. 2:20and folders, and you can use Cloud Code
76. 2:22inside of that environment. Now, VS Code
77. 2:24is probably the most popular one, and
78. 2:25big reason why a lot of people like
79. 2:27using Cloud Code inside of VS Code is
80. 2:29because you can spin up a Cloud Code
81. 2:31session in the middle, and you can
82. 2:32immediately see the files that it's
83. 2:33created on the left side here. And you
84. 2:36can watch everything happen as it builds
85. 2:39the apps for you. So, I think what it
86. 2:41comes down to is control, right? So, the
87. 2:43terminal gives you the most amount of
88. 2:45control, but it's also the most
89. 2:47intimidating if you're just starting
90. 2:48out. The desktop app gives you less
91. 2:50overall control, but it's a lot easier
92. 2:53to understand visually. But honestly,
93. 2:54Cloud has been making a lot of updates
94. 2:56to the desktop app compared to even
95. 2:57couple months ago. It feels a lot more
96. 2:59integrated now. You can preview what
97. 3:01you're building on the right side. You
98. 3:02can use the browser. You can look at
99. 3:04your files, and you can do a lot more
100. 3:06directly inside of the app. So, if
101. 3:08you've been watching other tutorials
102. 3:09where people are using terminal or VS
103. 3:11Code, now you know what you're looking
104. 3:13at. Now, I think for most people, the
105. 3:15desktop app is more than enough. So, in
106. 3:17this video, I'm going to show you how
107. 3:18everything works inside of the Cloud
108. 3:21desktop app. Now, the next thing that
109. 3:22you need is a Cloud subscription. If And
110. 3:24if you are doing this for the first
111. 3:26time, I'd recommend starting with the
112. 3:27cheapest plan here, $17 a month. And I
113. 3:30think this is good enough for most
114. 3:31people when they're getting started. And
115. 3:33once you start building more things, you
116. 3:34can upgrade to the $100 plan that gives
117. 3:36you five times more usage, or even the
118. 3:38$200 plan with 20 times usage. Now,
119. 3:41speaking of usage, this is something
120. 3:42that you want to pay attention to as
121. 3:43well as you're building your app. If you
122. 3:46go to settings and usage, you're going
123. 3:47to be able to see your usage here. So,
124. 3:49even though you're on a a plan, the
125. 3:50limit resets weekly, and it also resets
126. 3:53every 5 hours. And I know that's
127. 3:55confusing at first, but you can monitor
128. 3:57the progress here. So, if you're working
129. 3:59on something and you hit your limit,
130. 4:01just be aware that it won't be long
131. 4:02until you can use it again. And also,
132. 4:04there's a couple of ways that you can
133. 4:05conserve your usage, so I'll be sharing
134. 4:07some of those tips throughout the video.
135. 4:09All right, so I'm going to start
136. 4:10building something so you can see all
137. 4:11these features being put to use. So,
138. 4:13rather than giving you a boring
139. 4:15checklist of tools that Cloud Code has,
140. 4:17I'm actually going to build something so
141. 4:18you can see all these features being
142. 4:21used live. I think that's a better way
143. 4:23to learn. And today, we're going to
144. 4:24build a simple web application, so maybe
145. 4:26like a stock investment app where you
146. 4:28can put in a ticker symbol and it gives
147. 4:30you live pricing stocks just like what
148. 4:32you see on Yahoo Finance or Google
149. 4:34Finance. And I'm also going to show you
150. 4:36how to add an API to get the live
151. 4:38pricing of the stocks and how to even
152. 4:40connect to Stripe for taking payments.
153. 4:43So, if you're charging people a monthly
154. 4:44subscription, I'm going to show you how
155. 4:45to add that into your web application.
156. 4:48And I'm also going to show you how to
157. 4:49set up a database and how to connect
158. 4:50everything together, and finally, how to
159. 4:53deploy that to the web, how to connect
160. 4:54to a hosting provider, and make it live
161. 4:56so everybody can access your website.
162. 4:59All right, so I am on the desktop app
163. 5:00now. If you don't have this already,
164. 5:02please download it. And before I start a
165. 5:05project, I like to connect to a folder.
166. 5:07So, if you look to the bottom left here,
167. 5:09you'll see that I'm connected to this
168. 5:11folder. So, you can click on this
169. 5:13and open folder. So, as you can see
170. 5:15here, I have connected this folder that
171. 5:17I just created, basically a blank folder
172. 5:19with just one image here. And you want
173. 5:21to do this for every project that you
174. 5:23create cuz this is the place where Cloud
175. 5:25is going to create all the files related
176. 5:28to this app. And when it comes to
177. 5:30publishing or deploying your app, it's
178. 5:32going to be a lot easier because all
179. 5:34going to be in one place. So, So, if you
180. 5:36want to create a new folder, you can
181. 5:37just click a new folder, but in this
182. 5:38case, I already have this one here, so
183. 5:40I'm going to click open. And then you
184. 5:42can see the folder name populate here.
185. 5:45Now, in the bottom right, you will see
186. 5:46that you can select models here. So Opus
187. 5:494.8 just released today actually when I
188. 5:51was recording this video. I don't think
189. 5:52that you need to use the best model for
190. 5:55every task because again if you're not
191. 5:58on the max plan you got to burn through
192. 6:01your tokens very very quickly. So for me
193. 6:03I only use the Opus models when I'm
194. 6:05orchestrating the app when I'm building
195. 6:07the structure of it or when I'm asking
196. 6:09it to think of complex problems or maybe
197. 6:12if there's an error that Sonnet cannot
198. 6:13fix then I will switch to Opus to help
199. 6:16fix the issue. For so for 80 90% of my
200. 6:18projects I always use Sonnet 4.6. Now
201. 6:21before I start any project I like to
202. 6:23plan and structure the application. You
203. 6:25don't want to just give it one prompt
204. 6:27and ask it to build it immediately. So
205. 6:29here on the bottom left you can actually
206. 6:30click on plan mode and this allows
207. 6:32Claude to ask you clarifying questions
208. 6:35before it builds anything. So it's
209. 6:36actually you're having a chat with
210. 6:38Claude to determine the features that
211. 6:40you want in the app and how to actually
212. 6:42structure the whole app before actually
213. 6:44building anything. And this is called
214. 6:46meta prompting. So meta prompting
215. 6:47basically means that you're asking the
216. 6:49AI to help you create the best prompt
217. 6:52and this is a good exercise especially
218. 6:53if you don't have domain expertise on
219. 6:55the app that you're building. And even
220. 6:56if you're confident on the subject
221. 6:58matter I think this is a good exercise
222. 7:00just to brainstorm with Claude and
223. 7:02you'll start to uncover a lot of new
224. 7:03things that you might want to implement
225. 7:04on the apps. So I have this prompt ready
226. 7:06here I'm going to paste it here. I want
227. 7:07to build a stock investment app similar
228. 7:09to this app here Google Finance
229. 7:11basically right? So Google Finance just
230. 7:13looks like this and it's just a simple
231. 7:15page where I can put in my ticker symbol
232. 7:17here and it will give you the pricing
233. 7:19and also you can see some news here and
234. 7:21you can add these stocks to your
235. 7:23portfolio and save it. And let's call
236. 7:25the app Market Cap. It has live pricing
237. 7:27news and the ability to save stocks in
238. 7:29my portfolio. List out the features I
239. 7:30should have and map out the plan and how
240. 7:33we're going to build the app and ask me
241. 7:35clarifying questions. And then I'll just
242. 7:37go and hit send. So as you notice for
243. 7:39every project I like to give it some
244. 7:40kind of reference right? Whatever app
245. 7:42that you're trying to create or build,
246. 7:44there's probably already something out
247. 7:45there that already exists. So, by doing
248. 7:47this, you tell the AI to actually look
249. 7:49at this reference website, study the
250. 7:51features they have, and maybe try to
251. 7:52suggest new unique features that maybe
252. 7:55you can add to your make it unique. Now,
253. 7:57because you're on plan mode, Cloud is
254. 7:58actually going to give you a lot of
255. 8:00these questions before actually building
256. 8:02anything, right? So, first question it's
257. 8:03asking is what should Market Cap
258. 8:05actually do? Would stock track only? Is
259. 8:07it going to just watch live prices, read
260. 8:09news, or you want to do paper trading or
261. 8:11real trading? No, I just want this one.
262. 8:13And what platform should we build for
263. 8:15first? So, are we building a web
264. 8:16application, mobile app, or desktop app?
265. 8:18So, obviously we're going to do this
266. 8:19one, which is also recommended here. So,
267. 8:21click on this. And where do we get live
268. 8:23pricing news data? So, free API,
269. 8:25Finnhub, Alpha Vantage, paid API. Okay,
270. 8:27we're going to go with free one,
271. 8:28obviously. So, just me, single user, or
272. 8:31multi-user account? So, obviously we
273. 8:32want other people to be able to sign up.
274. 8:34So, we're going to connect to Supabase
275. 8:36authentication and role-level security.
276. 8:37So, we do want this one. So, it's more
277. 8:39complex, but that's what this tutorial
278. 8:41is for, right? So, click on this, and
279. 8:43then it's going to do a bit more
280. 8:45thinking. And now it's giving me a full
281. 8:47plan, right? So, on the right side here,
282. 8:49it's pulled up a new window inside the
283. 8:51app. So, Market Cap build plan, right?
284. 8:53Jason wants to build Market Cap stock
285. 8:54investment app modeled after Google
286. 8:56Finance. So, and down here you'll see
287. 8:58that we've got four bullet points here,
288. 9:00what we're going to do, we're going to
289. 9:01track the prices only, there's no buying
290. 9:03or selling, what kind of platform we're
291. 9:05going to build, and then where we get
292. 9:06the API from to get the live pricing,
293. 9:09and also the ability to add users,
294. 9:11right? And if you scroll down, you're
295. 9:13going to see more detail on what the
296. 9:14features that we're going to have on the
297. 9:16app, which I think looks really good.
298. 9:18This is everything that I was thinking
299. 9:20about, actually. So, yeah, it's going to
300. 9:23be responsive as well, got live pricing,
301. 9:25got the news feed, and the ability to
302. 9:27add stocks to your own portfolio. Nice.
303. 9:29So, these are the tech stack as well,
304. 9:32and they look correct to me. And if I go
305. 9:34down here, you'll see that there are two
306. 9:37things that I need to provide, which is
307. 9:39the API key and confirm the Superbase
308. 9:41project, which is what we're going to
309. 9:42get to later on. All right, so I'm going
310. 9:43to approve the project, but before
311. 9:45asking it to build everything, I want to
312. 9:47see the visual, right? I want to see
313. 9:48what the app will look like, cuz for me,
314. 9:50I like to build out the front end first,
315. 9:52approve the design, and then I have it
316. 9:54build the back end to connect all the
317. 9:55functionality. Now, in order for it to
318. 9:57come up with a good design, you need to
319. 9:58have references, right? Now, I like to
320. 10:00go to Dribbble here to find design
321. 10:02inspiration, so I can search for
322. 10:04investment app here, and you'll see tons
323. 10:07of examples here of beautiful-looking
324. 10:09designs that you can just grab and bring
325. 10:11it to Claude for reference. Or if you
326. 10:13can't find anything you like, you can
327. 10:14also go to Pinterest here. So, if I type
328. 10:16in investment web app, you'll also see a
329. 10:19bunch of designs that you can choose
330. 10:21from. And I was just doing this earlier,
331. 10:23and I found this one that I quite like.
332. 10:25So, so I'm going to click on this, make
333. 10:27it bigger, and then I just save as
334. 10:29image, and then save it here in the
335. 10:32folder that we created, Market Cap app,
336. 10:34right? And this is actually the
337. 10:35reference image that you probably saw I
338. 10:37have in that folder. So, I'm going to go
339. 10:39back to Claude and then give it this
340. 10:41prompt, right? Before you build the app,
341. 10:42build the front end dashboard. There's a
342. 10:43reference image in that folder. I want
343. 10:46the app to follow this design, and then
344. 10:48hit send. Now, while this is working, I
345. 10:50think this is a good time to talk about
346. 10:52the context window. So, you'll hear this
347. 10:54term a lot, and that just means that
348. 10:56there's a limit on how much memory
349. 10:57Claude can retain in a single chat like
350. 10:59this. So, you'll see this icon here, and
351. 11:02if you click on that, you'll see that
352. 11:03this particular session has 1 million
353. 11:06window, and we've used about 56,000
354. 11:08here. So, that's about 6%, right? Now,
355. 11:10the way this works is that whenever you
356. 11:12ask a question or whenever you prompt
357. 11:14something new, it's Claude is actually
358. 11:15going to read every single thing in this
359. 11:18chat session all the way from the very
360. 11:20beginning. So, the longer your chat is,
361. 11:22the blurrier it becomes and the slower
362. 11:24it gets, right? So, there's a max of 1
363. 11:27million tokens here, which is quite a
364. 11:28lot, actually. And And that's because
365. 11:30we're using Opus 4.7, but if you are
366. 11:32using Sonata 4.6, you only get about
367. 11:34200,000 contacts window, which is a lot
368. 11:36smaller. But when it gets to that point,
369. 11:38what you want to do is you actually
370. 11:40going to compact the conversation,
371. 11:41right? Compacting means it will only
372. 11:43retain all the important things in this
373. 11:45conversation. Now, for me, what I find
374. 11:47is that even after you compact the
375. 11:49conversation, the quality dips. It
376. 11:51forgets a lot of different things. I'll
377. 11:53just ask it to summarize all the
378. 11:55information that is important and
379. 11:56crucial. And then I'll start a brand new
380. 11:58chat, and then I'll just copy that
381. 11:59information. And because we're working
382. 12:01in this particular folder, it has all
383. 12:03the files that it needs to get more
384. 12:05context. And don't worry, it will
385. 12:07actually make sense the more that you
386. 12:09use Claude. But that's basically how
387. 12:11context window works. All right, so now
388. 12:13after a few minutes, it's starting to
389. 12:14finish up the visuals here. And if you
390. 12:16look here, it's actually using Claude
391. 12:18preview here, which is basically an
392. 12:20internal tool that Claude has, which
393. 12:22will test the app that it's building by
394. 12:24itself before handing it to me, right?
395. 12:26Which is good. And this one in
396. 12:27particular is checking whether the dark
397. 12:29mode works. So, here it doesn't error,
398. 12:31dark mode is not applying. Let me
399. 12:32inspect the DOM state to debug. So, it's
400. 12:34actually fixing its own problems here
401. 12:36before handing it over back to me to
402. 12:38inspect. So, this is mind-blowing,
403. 12:39right? It's actually fixing its own
404. 12:41errors, and it's doing a lot of the work
405. 12:43here. All right, so it looks like this
406. 12:44is done. So, you'll see that the front
407. 12:46end dashboard is built and matches the
408. 12:48reference design. It's running at
409. 12:49localhost 3000. Now, you'll see this a
410. 12:51lot, right? Localhost simply means that
411. 12:53it's only running on your computer.
412. 12:55Nobody else has access to this because
413. 12:57you're just doing a demo. You're testing
414. 12:59things out, right? Now, there are two
415. 13:00ways that you can inspect the app. One
416. 13:02is through the in-app browser here. So,
417. 13:05let me close this out so I can make this
418. 13:07thing bigger. So, Claude has an in-app
419. 13:09browser here. So, this is actually a
420. 13:10browser
421. 13:11that you can scroll down. And this is
422. 13:13actually a web application, not a mobile
423. 13:15app. It just looks this way because it's
424. 13:17squished together, right? So, um the
425. 13:19other way is actually opening this up on
426. 13:21your Chrome browser. So, if I click on
427. 13:23this, I can see the full application
428. 13:25here, which is a lot easier to see. so
429. 13:27let me zoom out in here. And this
430. 13:29follows exactly the reference image that
431. 13:30I gave it, so that's a good thing. And
432. 13:33all of this obviously is dummy data. We
433. 13:35haven't connected the API
434. 13:37for pricing. And if I scroll down here,
435. 13:38let me check dark mode, light mode.
436. 13:40Yeah, that works, right? So, I think
437. 13:42this is just visuals, which is already
438. 13:44looking very good. Now, the reason why I
439. 13:46like having the in-app browser here is
440. 13:48because if I want to make changes to any
441. 13:50of these elements here, I can just click
442. 13:52on either this, the pencil icon here,
443. 13:54and I can just circle, and then I can
444. 13:57click add to chat, and I can make
445. 13:59changes. I can say change this to green,
446. 14:01change this to red, or whatever I want,
447. 14:03right? Or you can also click on the
448. 14:05second icon here, which is the annotate
449. 14:07icon. So, if you click here, you'll see
450. 14:09that it's going to select each UI
451. 14:11element, the exact one actually, and
452. 14:14this is actually more accurate than just
453. 14:15scribbling on the screen. So, let's say
454. 14:17I want to change this portfolio value
455. 14:19to, say, total value instead. So, I can
456. 14:21just click here
457. 14:23and change text to total value, right?
458. 14:27And you can do this to change the text
459. 14:29or change the colors, change the font
460. 14:31size, anything you want, basically. And
461. 14:33there you go. Now, it's changed the text
462. 14:35to total value. Now, you're going to see
463. 14:36that all these prices are still dummy
464. 14:39data. So, the next step would be to get
465. 14:41a free API to connect it to this app
466. 14:43here and get live pricing, right? So,
467. 14:46that's very easy to do as well. So, it's
468. 14:47actually recommending me to go to
469. 14:49Finnhub live data here to get the free
470. 14:51API key, so we can connect it to the
471. 14:53cloud, right? So, I'm going to go to
472. 14:54this website here and just sign up for a
473. 14:56free account. And once you sign up,
474. 14:58you'll have this API key here that you
475. 15:00can give to Claude. So, think of API key
476. 15:03as like a password, right? So, this is a
477. 15:05secret key that you actually don't want
478. 15:07to give to other people because this one
479. 15:09is free, but if you are giving an API
480. 15:11key out for, let's say, an app that
481. 15:13you're paying for, and if it gets
482. 15:15exposed, you're going to be paying for
483. 15:17everything, basically, right? So,
484. 15:18anybody can steal this. So, you want to
485. 15:19copy here, and you want to keep it in a
486. 15:21safe place. And I'm going to go back to
487. 15:23Claude and I'm going to say, "I'm ready
488. 15:25to connect to Finhub to get live
489. 15:27pricing. I have the API key ready, set
490. 15:29up the environment file, and get ignore
491. 15:31so I can paste in the API key." So, you
492. 15:34don't want to copy the API key here in
493. 15:36the chat cuz if your chat gets exposed,
494. 15:38then like I said, everybody can access
495. 15:40your API keys, right? So, what you want
496. 15:43to ask Claude to do is actually to set
497. 15:44up .env file, which is basically just a
498. 15:46text file that lives on your local
499. 15:48machine. And you also want to set up
500. 15:50.gitIgnore so it doesn't get pushed to
501. 15:52GitHub when you actually deploy the app.
502. 15:54And .env is basically an environment
503. 15:56file. It's basically just like a text
504. 15:58file that you keep all your passwords
505. 16:00in. And again, it lives on your local
506. 16:02machine and it doesn't get uploaded to
507. 16:04GitHub. So, hit enter here. All right,
508. 16:06so it's created the .env file inside of
509. 16:08the .gitIgnore. So, I can just simply
510. 16:11click on this.
511. 16:12And then it'll open up like a text file
512. 16:14here.
513. 16:15And you can simply paste in the API key
514. 16:18right here. And once you do that, you
515. 16:20can just click done. And it's going to
516. 16:22try to connect to the API. And actually
517. 16:24wire up the functionality of the app.
518. 16:26So, I'm going to let it work for a few
519. 16:28minutes. And I think this is a good time
520. 16:29to talk about connectors, right? So, if
521. 16:31you click down here, plus icon, go to
522. 16:33connectors, you'll see that I've
523. 16:35connected to Stripe and Superbase and
524. 16:37also Claude and Chrome, right? So, if I
525. 16:38go to manage connectors, you'll see that
526. 16:41Claude can actually connect to all these
527. 16:43popular apps here. So, for example, if
528. 16:45you're connecting to Gmail, Claude can
529. 16:47actually draft replies, you can actually
530. 16:49respond to your emails. If you're
531. 16:50connected to Canva, Claude can actually
532. 16:52create designs for you without you
533. 16:54having to manually go to Canva and
534. 16:56actually perform those jobs yourself,
535. 16:57right? Now, in our case, I've connected
536. 17:00to Stripe and Superbase cuz we're going
537. 17:02to use Stripe to accept payments, to
538. 17:04create payment links, and we're going to
539. 17:06use Superbase to connect a database and
540. 17:08store all the users' information, right?
541. 17:10All right, so it looks like it's done.
542. 17:11So, I'm going to test it out. Instead of
543. 17:13testing it here, I'm going to open my
544. 17:15Chrome browser again. And I'm just going
545. 17:16to hit refresh here. Okay, and I'm going
546. 17:18to test the API if that works, right? If
547. 17:21I click here, and let's say I want to
548. 17:23search for Microsoft MSFT. Yep, there
549. 17:26you go. So, it pulls all this
550. 17:27information from Finnhub. So, I'll click
551. 17:30on Microsoft, and there you go. So, it's
552. 17:32got the pricing, even has the chart
553. 17:34here. Uh this is not available for some
554. 17:36reason. 1 month, 3 months, and 1 year,
555. 17:40and you can hover around here for the
556. 17:42pricing. And then, if you look down
557. 17:43here, it's actually pulling all the news
558. 17:45as well. So, that is awesome. And just
559. 17:48to make sure that this is actually the
560. 17:49correct price, if I go to Google, and I
561. 17:52search on MSFT. Yeah, 426. So, that is
562. 17:55the correct pricing.
563. 17:56Which is good. All right. So, next,
564. 17:58we're going to add a functionality where
565. 17:59the user can actually save the stocks to
566. 18:02their portfolio, right? And in order to
567. 18:04do that, you're going to need to set up
568. 18:05a database. So, database is simply a
569. 18:07place where you can store users'
570. 18:09information, like the stocks that they
571. 18:11have saved to the portfolio. So, think
572. 18:12of it like an Excel spreadsheet, where
573. 18:14if you were to do this manually, let's
574. 18:16say you have 10 customers, right? Each
575. 18:18customer has different stocks in their
576. 18:19portfolio. These 10 different customers
577. 18:21have different stocks that they've added
578. 18:23to their portfolio. So, you want a way
579. 18:25to be able to store that information.
580. 18:27And we're going to use Supabase to
581. 18:29manage the database for us. Now, at the
582. 18:31same time, we're also going to add a
583. 18:33pricing plan here, cuz most likely than
584. 18:35not, if you are building an app like
585. 18:36this, you're going to charge a
586. 18:37subscription, right? You want to charge
587. 18:39a monthly fee to be able to to access
588. 18:41premium features. So, for this example
589. 18:43here, we're going to use Stripe
590. 18:45to accept payments, and I'm going to
591. 18:46show you how to do that in Cloud Code.
592. 18:48So, here's the prompt that I'm going to
593. 18:50give to Cloud, right? So, I'm going to
594. 18:51do two things at once, which is to set
595. 18:53up the database, and also payments,
596. 18:55right? So, for database, set up a
597. 18:58database with Supabase. I have the SCP
598. 19:00connected. I just want to have the
599. 19:01ability for users to log in and save
600. 19:04stocks to a watchlist, right? Users can
601. 19:06only see their own stocks. And for
602. 19:08payments, I also want to build a pricing
603. 19:10page with two plans, the free plan and
604. 19:14also a paid plan. Let's say you want to
605. 19:16charge 20 bucks a month. You want to
606. 19:18allow users on this plan to save stocks
607. 19:21to their watch list, right? Uh set up
608. 19:22Stripe recurring payment. I have Stripe
609. 19:24MCP connected. Create a dummy pricing
610. 19:26page so I can test the payment in
611. 19:29sandbox mode. Sandbox mode means that
612. 19:31it's uh this testing mode. It's not live
613. 19:34payment so you can you know, put in a
614. 19:36random credit card number and just want
615. 19:38to test if the payment goes through,
616. 19:40right? And I've authenticated myself to
617. 19:43both Stripe and Supabase. And if you're
618. 19:45wondering, the word MCP just simply
619. 19:47means that is a connector. And of
620. 19:48course, if you're doing this for the
621. 19:49first time, you do want to create uh
622. 19:52free account in Supabase. So I have my
623. 19:54own account here. It's free to sign up
624. 19:56so as you can see, I have this project
625. 19:57that I have already. And of course, you
626. 19:59also want to have a Stripe account,
627. 20:01right? So set up Stripe and right now
628. 20:03I'm on test mode here. So if you already
629. 20:06signed up for Stripe and you want it to
630. 20:08be on the sandbox mode for testing, you
631. 20:10want to click here and just click switch
632. 20:12on sandbox mode. So I'm going to hit go
633. 20:14here and going to let it work. Now it's
634. 20:16going to check Supabase and Stripe
635. 20:18simultaneously and it's probably going
636. 20:20to ask you for API keys to be able to
637. 20:22connect to those tools. So you can just
638. 20:24follow instructions. And one tip I can
639. 20:26give you when you're live coding, you
640. 20:28want to make sure that you actually
641. 20:29understand the things that it's doing
642. 20:31and not just blindly following the
643. 20:33instructions and just hitting go cuz
644. 20:35it's really easy to do that, right? But
645. 20:37I think it's really important to
646. 20:38understand every concept and why it's
647. 20:40doing certain things, right? Why you
648. 20:42want to use a database? Why you're in
649. 20:43sandbox mode? And if you don't
650. 20:45understand what a database is, you can
651. 20:46just ask it, "Hey, what is a database?
652. 20:47Why do we need this?" Or why do we use
653. 20:50Supabase and not other tools? So uh
654. 20:51these are the things that you can
655. 20:52actually ask Claude to explain to you
656. 20:54and you can ask it to explain it to you
657. 20:55in plain English so you can actually
658. 20:57understand this concept. So the moment
659. 20:59comes up again next time, you already
660. 21:00know what to do and it gets a lot easier
661. 21:02then. And most importantly, you
662. 21:04understand what you're building because
663. 21:05if something breaks in the future, you
664. 21:07already understand the structure of the
665. 21:08app and how things work together and
666. 21:10it's going to be a lot easier to fix.
667. 21:12And I think that's a better mindset to
668. 21:14have when you're live coding. All right,
669. 21:16so it looks like everything is done now.
670. 21:17Let me check this out. I go to my
671. 21:19browser again. Let me refresh the page.
672. 21:21And now if I go to pricing on the left
673. 21:23here, it's created this new page here
674. 21:25with two plans, free and pro. And if I
675. 21:28click on upgrade to pro, it's actually
676. 21:31created the payment link in Stripe as
677. 21:33well. So if you're wondering how this
678. 21:35was set up, actually if I go to my
679. 21:37Stripe account, and again I'm on sandbox
680. 21:39mode here, so all of this is dummy data.
681. 21:41So if you were to create a payment link
682. 21:43manually, you would go to payment links
683. 21:45here and you would create a test payment
684. 21:48link, right? But as you can see, Claude
685. 21:50actually created this payment link for
686. 21:52us because we had the MCP connected and
687. 21:55it was able to go into our Stripe
688. 21:56account without me having to do this
689. 21:58manually. Now if you're doing this for
690. 22:00the first time, when you connect your
691. 22:02Stripe MCP to Claude, it's going to ask
692. 22:05you to authenticate your account. And
693. 22:07also it's going to ask for your API key
694. 22:09so that Claude can talk to this
695. 22:11particular account, right? And to get
696. 22:13that API key, you can go to settings and
697. 22:15you can go to developers and click on
698. 22:18manage API keys and it's going to be
699. 22:20these ones on the bottom here. And
700. 22:22again, you want to save this in the ENV
701. 22:24file so that it doesn't get leaked to
702. 22:27the public. Now before I test this, I
703. 22:28want to go back to the home page and I
704. 22:30want to try logging in cuz Superbase is
705. 22:32connected now and I can start to create
706. 22:35my own account, right? So if I go back
707. 22:36to this pricing page, even if I click on
708. 22:39get started free, it's going to prompt
709. 22:41me to create an account and let's see if
710. 22:43I can create account here. Click enter.
711. 22:47Thanks. All right, I'm going to confirm
712. 22:48my account real quick and then I'm going
713. 22:50to log in again. Sign in and I'm in. So
714. 22:53that login works and if I want to check
715. 22:57whether the database is connected, I can
716. 22:58go to Superbase now and I already have
717. 23:01this project here. But if you're doing
718. 23:03this for the first time, obviously you
719. 23:04want to click on new project, and then
720. 23:06you would just create new project. But
721. 23:07this is a particular project that we're
722. 23:09working on, so I'm going to click on
723. 23:10this one, and I'm going to click on the
724. 23:12table editor here.
725. 23:13And I want to click on profiles here,
726. 23:15and you can see that this is the account
727. 23:17that I just created, right? So it shows
728. 23:18up here, so which means that it's
729. 23:20connected, right? Now, if I go back to
730. 23:22our website here, and I click on this
731. 23:24stock, Apple, now I want to click on add
732. 23:27to portfolio. Now, since this is a pro
733. 23:29feature, right? It's just triggered me
734. 23:31to upgrade. So if I click on this, so it
735. 23:33gives you this pricing page, and it's
736. 23:35going to ask me to upgrade to pro. So if
737. 23:37I click on this, it's going to go back
738. 23:38to the Stripe page that we created
739. 23:41earlier. And since this one is just a
740. 23:43test link, I also want to make sure that
741. 23:44this works, right? So I'm going to put
742. 23:46in my email, and then I'm going to check
743. 23:48if this works. And I'm going to paste in
744. 23:50this random number here, and this is
745. 23:52something that you can use to test out
746. 23:54your payment links for your Stripe
747. 23:55account, and then fill out the name as
748. 23:57well, and the country, zip code, and hit
749. 23:59subscribe. And if I go back to Stripe,
750. 24:02that transaction actually went through
751. 24:03here, succeeded. Now, if you go back to
752. 24:05the website, you can see that I am now
753. 24:07upgraded to pro, and with this badge
754. 24:10right here. And now I want to check if I
755. 24:12can start adding stocks to my portfolio,
756. 24:15and then I actually want to see it
757. 24:17displayed on the database as well, to
758. 24:19just verify that everything is connected
759. 24:21properly. So if I just click on this
760. 24:24stock here, Google,
761. 24:25and let's say I want to add this to my
762. 24:27portfolio, click on add to portfolio.
763. 24:29Yep, there you go. So I can add more
764. 24:31shares here.
765. 24:32100 shares, maybe
766. 24:34uh $1,000, and then hit add to
767. 24:37portfolio.
768. 24:38Yep, added to portfolio. Uh let me add a
769. 24:40couple more, just to make sure that this
770. 24:43works. Netflix, add to portfolio, 20
771. 24:46shares, $500,
772. 24:48add to portfolio. Yep, there you go. And
773. 24:51on the left here, I have a page called
774. 24:52portfolio, so I can click on this, and I
775. 24:54should be able to see the two stocks
776. 24:56that I just added, which are all here.
777. 24:58Perfect. Now, I also want to make sure
778. 25:00that this is not just displayed on the
779. 25:02website, but also saved in the database
780. 25:04that we just created. So, if I go back
781. 25:06to Superbase again, I go to table
782. 25:08editor, and it actually created a new
783. 25:11table here called holdings. So, here
784. 25:13you'll see the two stocks that I just
785. 25:15added, Google and Netflix here, and
786. 25:17including the shares, the cost basis,
787. 25:19and this is connected to this user,
788. 25:21which is the user I just created. And if
789. 25:23I want to check who this is, I can go to
790. 25:25profiles here, and I'll see the user ID
791. 25:27here as well, and the email address. So,
792. 25:29that works. Now, of course, you can
793. 25:31continue to build this out, you know,
794. 25:32you can change all these pages and make
795. 25:35it really, really nice, but I think for
796. 25:36the purpose of this demo, I think this
797. 25:38is pretty good enough. And now, the next
798. 25:39step is how do you actually get this
799. 25:42live on the internet, right? Because all
800. 25:44of this is still sitting in your local
801. 25:45machine, and nobody can access and and
802. 25:47nobody can see it except for you. And
803. 25:49you want to take all the files that
804. 25:50Claude has created for you for this app,
805. 25:53and you want to upload that into
806. 25:54something called GitHub, right? So,
807. 25:56you'll hear this a lot, GitHub. What is
808. 25:58GitHub for those of you who are not
809. 26:00familiar? GitHub is basically a place
810. 26:02where you can store all your code base
811. 26:04for your app on the cloud, so you can
812. 26:06deploy this on internet. And GitHub is
813. 26:09also a place where you can do version
814. 26:10control. So, when you're building an
815. 26:12app, you got to make more changes, you
816. 26:13got to make updates, and when something
817. 26:15breaks, you can revert back to the time
818. 26:17that everything was working correctly,
819. 26:19and you can do that with GitHub here.
820. 26:21So, you can think of GitHub like a
821. 26:22Google Drive, right? So, if you want to
822. 26:23share files with another person, if it's
823. 26:25sitting on your computer, nobody can see
824. 26:27it, but if you save it on a Google
825. 26:28Drive, it's now going to be saved on the
826. 26:30cloud, and you can just share it with a
827. 26:32simple link. And this works kind of the
828. 26:34same way, but for codes, right? Now, you
829. 26:36want to create a free account on GitHub,
830. 26:37and then you want to create a new repo,
831. 26:39right? So, you can click on new, and you
832. 26:41want to just name it here.
833. 26:43Um so, I can call it market cap app, and
834. 26:46then you can choose whether to make it
835. 26:48public or you want to keep it private
836. 26:50for now. You can do that as well. So,
837. 26:51I'm going to keep it private for now.
838. 26:53And then, I'm just going to hit create
839. 26:55repository. And once that's done, you
840. 26:57want to grab this link here. And
841. 26:58basically, this is the link to this repo
842. 27:00here that you want to give to Cloud so
843. 27:02Cloud can upload all the files directly
844. 27:04here. So, I'm going to go back to Cloud.
845. 27:06I can simply say I'm ready to publish,
846. 27:08connect to my GitHub account, and push
847. 27:10to this repo. And then, I'm going to
848. 27:12just paste the link that I got from
849. 27:14GitHub. Now, if you're doing this for
850. 27:16the first time, you want to authenticate
851. 27:18yourself. It's going to ask you for some
852. 27:19keys.
853. 27:21And just follow the instructions, but
854. 27:23that is just one time. And since I've
855. 27:24already connected before, I can just
856. 27:25simply do this. And then, I'm going to
857. 27:27hit go. All right. So, looks like it's
858. 27:28done. 41 files pushed to the GitHub
859. 27:31repo. And API keys are not included. So,
860. 27:34perfect. So, if I go back to GitHub
861. 27:35here, I can see that all the files are
862. 27:37actually here. Now, the next thing to
863. 27:39do, which is the last piece of the
864. 27:40puzzle here, is actually to get this
865. 27:42live on the internet, right? And we're
866. 27:44going to need web hosting for that. And
867. 27:45for this, you can use any web hosting
868. 27:47you want. But today, I'm going to use
869. 27:48Hostinger, which is currently sponsoring
870. 27:50today's video. And I've actually been
871. 27:52using Hostinger for years for a lot of
872. 27:54the websites that I build. It is up to
873. 27:56nine times cheaper than traditional
874. 27:57hosting, and you get a free domain for 1
875. 27:59year. You get a business email. And the
876. 28:01nice thing about this particular hosting
877. 28:03is that it automatically connects to
878. 28:04GitHub. So, any changes that you make to
879. 28:06your code or to your app, it
880. 28:08automatically updates on Hostinger
881. 28:09without you having to do anything
882. 28:11manually. So, I'm going to provide the
883. 28:12link for you guys to access this page
884. 28:14here. So, once you land on this page,
885. 28:16you want to click on view plans. So,
886. 28:17you'll see two different plans here,
887. 28:19business and cloud startup. Uh you can
888. 28:21choose business. It gives you five
889. 28:22managed web applications. If you want to
890. 28:24build more apps, you can definitely go
891. 28:26for the cloud startup, which gives you
892. 28:2810 web applications and up to 100
893. 28:30websites. And by the way, these plans
894. 28:32are not usage-based. It's a fixed
895. 28:33monthly cost, so you know exactly how
896. 28:35much you'll be paying every single month
897. 28:37for this. So, today I'm going to choose
898. 28:38the business plan here, and I click on
899. 28:40choose plan. And you're going to land on
900. 28:41this page where you can pick the period
901. 28:43here. Obviously, if you sign up for a
902. 28:46longer plan, it's going to be the
903. 28:47cheapest. So, I'm going to pick 48
904. 28:49months here for $3.99 a month. And then,
905. 28:52you also get a free domain here for 1
906. 28:54year. So, you can choose any of these
907. 28:55domains here. And also, if you use my
908. 28:57code Lee Jason, you're going to get
909. 28:59additional 10% off the entire plan, so
910. 29:01it's even cheaper. Now, you want to hit
911. 29:03continue. And once you're here, you can
912. 29:05go to websites, and you're going to go
913. 29:06to Node.js, and click on deploy your
914. 29:09Node.js website in minutes. So, click on
915. 29:10get started, and then make sure that you
916. 29:12have business web hosting selected, hit
917. 29:14continue. And here's the step where you
918. 29:16want to connect to GitHub, right? So,
919. 29:17it's going to be able to pull all the
920. 29:18files from this GitHub account to
921. 29:20Hostinger, right? So, I'm going to click
922. 29:21on continue to GitHub. And then, you
923. 29:23want to authorize this connection as
924. 29:24well. And here, you can select all
925. 29:26repos, or you just want to select the
926. 29:27particular repo that you want to
927. 29:29connect. So, in this case, I'm going to
928. 29:30click this one, and I'm going to find
929. 29:32the one that we just created. So, which
930. 29:34is market cap app, right? And I'm going
931. 29:35to hit install and authorize. And then,
932. 29:37I'm going to verify. And there you go,
933. 29:39my repo is now here. I can just click on
934. 29:41this and hit continue. Now, once you're
935. 29:42on this page, you want to pay attention
936. 29:44to this thing called environment
937. 29:46variables down here. So, this is
938. 29:47basically the API keys that allows you
939. 29:49to pull up live pricing, make payments
940. 29:52through Stripe, and also connect to
941. 29:54Superbase, right? So, you want to add
942. 29:55this, and you want to just add the API
943. 29:58keys here to each of those services. Or,
944. 30:00if you don't want to do this
945. 30:01individually, you can just hit import
946. 30:03.env file. Click here, and you want to
947. 30:05just go to that folder, and it should be
948. 30:08in that folder. Now, .env file is a
949. 30:10hidden file. So, if you're on a Mac,
950. 30:13there's one way to make that visible. We
951. 30:15we just do hit command shift and period,
952. 30:17and you'll see that the .env file here.
953. 30:19So, just click on this file,
954. 30:22and then hit open. And then, it's going
955. 30:24to automatically populate all the API
956. 30:25keys inside of here. And then, you want
957. 30:27to hit finish, and then hit deploy. And
958. 30:30in just a couple of minutes, it's done,
959. 30:31right? So, you can just click on this
960. 30:32temporary domain here, and your website
961. 30:35is published, right? So, this is a
962. 30:37temporary domain, obviously, if you look
963. 30:38at the URL here, and you can change this
964. 30:41domain to anything you want with
965. 30:42Hostinger. And if you share this link,
966. 30:44anybody can access this website. And if
967. 30:46you even check whether this thing works,
968. 30:48yep. So, the live pricing works as well.
969. 30:51I can pull up different stocks here, and
970. 30:53it's working properly. And one thing to
971. 30:55note here, because it's connected to
972. 30:57GitHub automatically, and you have auto
973. 30:59deployment on here, and what's going to
974. 31:01happen is that it when you make changes
975. 31:03to your app, and when Cloud pushes all
976. 31:05the new files into GitHub, and Hostinger
977. 31:07will actually detect that there are
978. 31:08changes made to that repo, so it's going
979. 31:10to pick it up, and it's going to auto
980. 31:12deploy the website to reflect the latest
981. 31:14changes. And I think that's a nice
982. 31:16feature to have, so you don't have to
983. 31:17keep manually deploying your website.
984. 31:19So, I hope you guys can see what the
985. 31:20basic workflow looks like when you're
986. 31:22building an app with Cloud Code. The
987. 31:24next time you see someone build an app,
988. 31:26you know exactly what all the terms
989. 31:28mean, and it's going to be a lot easier
990. 31:30to follow. Now, of course, what you see
991. 31:31today it's just a demo app, but if you
992. 31:32guys want to watch me build a real app,
993. 31:35I recently made a video on how I built
994. 31:37uh calendar booking app called Calendly,
995. 31:39completely from scratch. So, if you want
996. 31:41to watch that, you want to click here,
997. 31:42and I'll see you guys there.