YT YouTube2Text

YouTube2Text → Transcripts → How to Build Real Mobile Apps with Claude - FULL COURSE

How to Build Real Mobile Apps with Claude - FULL COURSE — Transcript

by Codesistency · 32,121 words · 4,414 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00So, I don't know if you have heard of
0:01Cali before, but it is a simple mobile
0:05application that is tracking the
0:06calories and it is making $6 million a
0:09month. So, I wanted to build my own
0:12version of it and publish it on the app
0:14store. Well, I have done that and the
0:16entire process took me 14 days and
0:19exactly 5 days after the launch, I got
0:21my very first customer and I have used
0:24AI throughout the entire process with a
0:27structured workflow and a plan. And for
0:30marketing side of the things, I have
0:32used AI influencers and I posted videos
0:35on Tik Tok and Instagram which brought
0:38me traffic and customers. And now in
0:40this video, I'll show you the entire
0:42process by building a simplified version
0:45of my mobile application. I'll show you
0:47everything from generating beautiful
0:49designs to planning the app to building
0:52a landing page with demo mockups. And
0:55you can use the same workflow for any
0:57kind of application that you can
0:59imagine. Before we get into coding, let
1:01me give you a quick demo of the end
1:02result so that you know what we are
1:04building in this course. All right. So
1:06this is the exact end result that we're
1:08going to have in this video which is a
1:10simplified version of my actual
1:12application which is published on app
1:14store. So let me give you a quick demo.
1:16So first off we start with the
1:18onboarding process. As soon as you press
1:21this button there will be a couple of
1:22different questions so that we can get
1:24you a personalized meal plan. Here I'll
1:27say this is my gender. Let's say next.
1:30Then you can select your birthday date.
1:32You can tell everything is working as
1:34expected.
1:36And then what's your height? I'll just
1:38go with the default. This is my weight,
1:41let's say. And I want to gain weight.
1:44And then let's say I want to go with
1:47something like 75.
1:51This is how I'm active month uh weekly.
1:55And then let's say I want to get like 1
1:57kilos per week, which is kind of
1:59aggressive, but that's fine. Let's say
2:01next. I want to have a classic diet.
2:04Once you say next, this is going to
2:06build your plan in the background. So
2:09basically, we are sending your data to
2:11OpenAI and as you can tell, it's going
2:13to calculate then give you some details
2:15that you should get daily. Like this is
2:18how much calorie I need to get daily to
2:20be able to hit my hit my goals. So I'm
2:24just going to say continue. And after
2:26this, we need to kind of like sign in,
2:28right? so that we can have our progress
2:31or the details saved in the application
2:34as well as in the database. Now once you
2:36sign in this is the UI that you're going
2:38to get. We have three different screens.
2:40Home screen, the food scanning screen.
2:43Now we cannot really see the background
2:45or the camera because this is running on
2:47simulator. But if you run this in your
2:50actual phone, you will basically use the
2:52camera. So this will actually work. In
2:55the simulator, you can use your gallery
2:57if you really wanted to. So once you
2:59press this button, you can select images
3:01from your gallery and that would also
3:03work. Then we also have the profile
3:06screen. And under the profile screen, we
3:08have user details. Then we also have a
3:10privacy policy which is something that
3:12we have actually built and deployed. And
3:14we also linked it to this button and we
3:17also have the same thing for terms of
3:19services. Now if you don't have these
3:21then your application will be rejected
3:23by Apple. Then we have sign out delete
3:26your account functionality. Again this
3:29is something that you have to have. This
3:31is not optional. Then on top of
3:33everything we have the send feedback
3:35button which is working actually with
3:38Sentry. So your users can report a bug
3:41or give you some feedback or ask for
3:44more features in this application. And
3:46then under the home screen we have the
3:48calendar. You can go back in two weeks
3:51and if you wanted to extend it, you can
3:53do so. Then we have the streak
3:55functionality like basically every
3:57single day that you log in this will be
4:00incremented. It is just kind of like
4:02motivational feature not really anything
4:05complex. Now other than this the most
4:07important feature is going to be meal
4:10scanning. So let's go ahead and test
4:12out. You can just select the meal from
4:14your gallery or you can take the photo
4:16as well. But since you are in simulator,
4:18I'll just show you this option. Here we
4:21can retake or just say analyze the food.
4:23We're just going to run a task in the
4:25background. So basically, we will take
4:27this photo and send it to OpenAI or any
4:30kind of AI platform. Then they will
4:33calculate the calories, protein, carbs,
4:36and fat. Then we can either scan another
4:39food or just say done. This will be
4:41added to our meals under the home
4:44screen. So this is the entire
4:46application that we are going to build
4:48in this tutorial and at the end I'll
4:50show you how to generate AI influencers
4:52with before and after videos then how to
4:55edit them that can go viral on Instagram
4:58and Tik Tok. Now this is not yet another
5:01VIP coding tutorial but it is like a
5:03playbook that you can follow along to
5:06bring your ideas into reality with AI
5:08tools. Throughout this course, I'll be
5:10sharing tips and tricks that you must
5:12know such as having a privacy policy in
5:15terms of services pages for your
5:18application. Otherwise, your app will be
5:20rejected by Apple or in the similar way
5:23you have to have a delete your account
5:25option. And another thing is that if you
5:27include both options like Google, then
5:30you must have Apple as well otherwise
5:33your application will get rejected by
5:35Apple once again. So these are the
5:37things that you would learn the hard way
5:40but hopefully in this video I'll share
5:42most of the things that I know. Now when
5:44it comes to the text tag we are using
5:45some of the best tools out there and
5:47they are completely free to get started
5:49with. So you don't need a credit card to
5:52be able to follow along. We will use
5:54React Native and Expo as our framework
5:56and this is one of the best ways to
5:58build a mobile app as of 2026. You have
6:02only one codebase that can run on both
6:04iOS and Android. For authentication, we
6:07will be using Clerk which provides all
6:09kinds of sign-in options and it's as
6:12easy as switching a button. For
6:14database, we will use Postgress which
6:16will be provided by Neon and it'll be
6:18deployed on the cloud. And for running
6:21our AI agents, we will be using
6:23trigger.deaf which is going to do most
6:25of the heavy lifting. So when we take a
6:27photo of our meal in the background a
6:30task will fire where we sent this photo
6:32to open aai to analyze the calories and
6:35macros. We will update the UI in real
6:37time and if anything fails trigger.dev
6:40will handle the retries automatically
6:43and we will store the images and
6:45optimize them using image kit. For error
6:47tracking and monitoring we will use
6:50Sentry which also has an AI code
6:52reviewing tool that we will get into
6:54later in the video. I will leave some
6:56special links in the description that
6:58will get you free credits on all of
7:00these tools. And as usual, the source
7:03code of this project will also be free.
7:05Now, with all that being said, let's not
7:07waste any time and get started with the
7:09course. Now just before we get started I
7:12quickly want to mention that we have a
7:14school community and within this school
7:17community I have basically documented
7:19the entire journey of building my own
7:22application and publishing it to app
7:25store. Here you can tell everything took
7:27exactly 14 days because the day zero is
7:30kind of like crash course. So everything
7:33took around 14 days to submit it to the
7:36app store and then we start with
7:38marketing and new classes will be coming
7:42every single day. So this is a community
7:44for those of you that are interested to
7:46see the entire process like having
7:49payments, you know, we have monthly,
7:52yearly plans, maybe even some weekly
7:54plans. Then how do you get through the
7:57entire submission process or something
8:00like how to implement push
8:01notifications? And this is not just a
8:03course, but it's a live community. Here
8:05you can tell everyone is sharing their
8:08own process like motivating each other,
8:10so on and so forth. And actually, one of
8:13our students has already published their
8:15app on the app store. And just for the
8:17record, this is his app and he built it
8:20with me within our community in exactly
8:2214 days. And just to give you some
8:25insights, like when you press one of
8:27these classes, we have specific videos
8:30for that day. And you can always come
8:33back and doublech checkck these lessons
8:35if you're interested. So, if you want to
8:37join, I'm going to leave the link in
8:38description. And hopefully I'll see you
8:40inside.
8:42All right. So, as usual, we're going to
8:43start from absolute scratch. I just have
8:46an empty folder which is opened up in VS
8:48Code. And this is the name that I came
8:49up with. You can really call this
8:51anything that you wish. Now, before we
8:53jump into coding, there are a couple of
8:54different things that I want to mention.
8:56The very first one is Node.js. I'm
8:58assuming that every single one of you
9:00already have this installed, but just in
9:02case if you don't have it, you need to
9:03visit nojs.org, press the download
9:06button, and then leave everything as
9:08default. Then just install it. Okay. So
9:10this is the very first thing that you
9:12need to have. Now when it comes to AI,
9:14I'll be using cloud, but you can really
9:15use anything that you wish. That could
9:17be codex, cursor, anti-gravity, you
9:20know, wind surf, really anything. And as
9:23you know already, this is not 2018
9:25anymore. We don't really write code by
9:27hand, which is extremely slow. Okay, so
9:30I'll be using cloud and there are a
9:31couple of different ways of using it. So
9:34you can use their desktop application or
9:36their terminal. Sorry, not their
9:38terminal but just within a terminal or
9:41within a VS code with their extension
9:44and this is what I'll be using. So
9:46basically within VS code let me open
9:47this up like here literally you can just
9:50press doubleclick anywhere on this right
9:53hand side and then press this button and
9:55then you will be able to run cloud. Now
9:58if you don't have like if you cannot see
10:00this button that's because you don't
10:02really have their extension. Let me
10:04showing everything. And then you'll just
10:06install cloud code for VS code. So once
10:10you install it, it's going to ask you to
10:12log in. And then once you log in, you'll
10:14be able to just talk with cloud. And
10:17here there are a couple of different
10:18models. As I'm recording this video, the
10:22recent model that just came out is, I
10:24think, Opus 5. I'll be using Opus 5. I
10:27think Fable 5 is better than that, but
10:30it just uses so many tokens. So in this
10:33case I'll be going with Opus 5. Okay.
10:37Now again let me try to zoom in. And now
10:40as you already know I have built and
10:42deployed a mobile application to app
10:44store in exactly 14 days. And to be able
10:47to make it I have used a really really
10:50cool workflow and in this video I'm
10:52going to show you everything that I've
10:53done. So here I have some diagrams.
10:55Let's go ahead and take a look at it.
10:57And I have some prompts that I'm going
10:59to provide it to you within the link in
11:01the description. Okay, so here is the
11:03workflow that we're going to be using.
11:06First off, we would like to plan and
11:08describe our project. Like we're going
11:10to define the idea, the goals, features,
11:13the screens that we're going to have,
11:15you know, the user flow, and then the
11:17text tag. Then once we have our plan,
11:20depending on this plan, we are going to
11:21generate UI. And for the UI design,
11:25we'll be using AI. And I have actually a
11:28pretty cool workflow or I should say
11:30some prompts that generates really
11:33really good looking UI designs. And here
11:35again like I have generated bunch of
11:37them. And for every single one of these
11:39designs we have the prompts. So you can
11:42copy them like I'll show you how to do
11:44it from absolute scratch. But yeah these
11:47are the first two steps. And then once
11:50we have the UI design, we'll just get
11:52into the features screen by screen. So
11:55here let's say we have the
11:57authentication screen right we'll get
11:59started with it once it is done we'll go
12:01with the next screen so on and so forth
12:04and for every single feature we can use
12:07some kind of AI tool that's going to
12:10that's going to analyze our codebase and
12:12it's going to tell if there is anything
12:14that we need to fix. So first off we're
12:17going to selfch checkck that right. So
12:18we'll test this out within our simulator
12:21or with our actual phone and once we
12:24pass them then we'll ask AI to have a
12:27code review and then here it's going to
12:29say you know if the feature is
12:31completed. So if the feature is
12:32completed we're going to commit our
12:34changes and move on to the next feature.
12:37But just in case if we have some issues
12:39then we'll go ahead and run this loop
12:41again and again. Okay. And then
12:44eventually once we have no more features
12:46that means the project has been
12:48completed. We have built every single
12:50feature, reviewed it and finalized it.
12:53Okay, so that's the workflow. First off,
12:56I'll go into the plan mode prompt and
12:58I'm going to copy everything. Now I
13:00would say just pause the video and try
13:02to read this prompt. Basically we are
13:04asking AI to interview us with this you
13:07know about this project so that it never
13:09guesses anything but instead asks us
13:12everything right so we are on the same
13:14page so I'm going to copy everything and
13:17at the very end we will you know let me
13:20just paste and then I'll explain here
13:22I'll go ahead open up the cloud instance
13:25you can use cursor or you know codeex
13:27anything really just go ahead paste this
13:30in and then we'll start describing our
13:33project. Now you can type it out which
13:35is pretty boring and slow or you can
13:37just you know press this button and talk
13:40with cloud. Okay. So in this case I'd
13:43like to just press this button and talk
13:45with cloud you know explain most of the
13:47things that I want to have in this
13:50application. So I'm going to give every
13:52single detail you know as much as
13:54possible and then also the text tag.
13:57Okay. So I'm going to press this button
13:59and let's go ahead start talking.
14:03Well, actually, let me do it again.
14:07All right. So, I want to build a project
14:10just like Cali. If you don't know
14:12already, it is a calorie tracking app.
14:15Basically, users will take a photo of
14:18their meal and then we will send this
14:20photo to OpenAI or any kind of AI agent.
14:25you know, it's going to take a look at
14:26the photo, analyze it, then it's going
14:29to give the amount of calories we have
14:31in that meal, protein, you know, fats,
14:35carbs, and even like macros or it's
14:38actually the same thing. Uh, but
14:40anyways, so that's the general idea of
14:43our application and we would like to
14:45make this experience for, you know, like
14:49we would like to make it for every
14:51single individual. So it's not going to
14:53be random. And to be able to achieve
14:55this, we can have an onboarding process.
14:58So we're going to ask users their age,
15:01you know, their height, their weight,
15:03what's their goal. Do they want to cut
15:06weights or do they want to do they want
15:09to gain weights? You know, that kind of
15:11thing. So we would like to have the
15:13onboarding process. We would like to
15:15have an authentication screen. And then
15:18once they process once they once they
15:22gone through the authentication process
15:24and onboarding process we're going to
15:26take them to our homepage where they can
15:30take a look at their history of the
15:32foods and there will be a screen where
15:35they can you know open up their camera
15:37and take a photo of their meal. And then
15:41there will also be a profile screen
15:43where they can edit their information.
15:47Okay. So, I hope this this gives you
15:50kind of like an idea. And this is
15:53basically the same thing or like a
15:54similar thing that I've shown in the
15:56intro of this project. So, we're going
15:59to have the authentication screen,
16:00onboarding, you know, the camera screen,
16:04home screen, profile, so on and so
16:06forth. And I think now we can give my
16:09text tag and it's going to ask us a
16:11bunch of different questions. Anyways,
16:13so here I'll say for authentication I
16:17would like to use clerk with Google and
16:20you know Apple authentication options.
16:24Then for database we're going to be
16:26using Postgress which will be provided
16:28by Neon. And for AI agents and
16:32background jobs we'll be using
16:34trigger.dev.
16:36And what else? I think for for error
16:39tracking and monitoring we'll be using
16:41Sentry and for image storage and
16:45optimization as well as transformations
16:47we'll be using image kit. So keep those
16:50in mind and you know go ahead ask me the
16:53questions then eventually once I answer
16:57every single question you would like to
16:59create a plan MD file and we'll be using
17:02expo and react native to build this
17:05project but for now I don't really want
17:08you to initialize initialize the expo
17:12project
17:15okay so here I don't know why it says
17:16expo but it should be expo I'll copy it
17:20and I think I'll just scroll to the top
17:22here. I had a typo with AI. Now Kelly is
17:26going to be Cal AI. Let's see if there
17:29is anything else.
17:32Okay, export React Native. And yeah, I
17:35think I'll select the plan mode. This is
17:37really really important because we would
17:39like to plan it and we'll just um send
17:42it. And now before we start answering
17:45the questions from cloud, let's go ahead
17:47and set up the tools that we'll be using
17:49in this tutorial. So first off, we'll
17:51start with the trigger.dev. Now, if you
17:54don't know already, this is the platform
17:56for building AI agents and workflows in
17:59Typescript. So think about what our
18:02application actually does. A user scans
18:04a meal, right? And then an AI agent has
18:08to analyze that image. So, it's going to
18:10figure out the ingredients, estimate the
18:12calories and macros. Now, that's a
18:15longunning job. It can take 10 to 15
18:18seconds, and it can fail halfway
18:20through. So, you can't really run
18:22something like that inside a mobile
18:25applications request cycle. And that's
18:27exactly where trigger.dev comes into
18:30play. Now, to be honest, this is going
18:32to be the main engine of this project.
18:34Everything our AI agents do, you know,
18:37the image analysis, the calorie
18:39estimates, all of it runs on
18:42trigger.deaf. So our agents will run on
18:45their infrastructure and there will be
18:47no timeouts, no servers to manage and
18:50you know if the AI call fails at any
18:53point, it's going to retry
18:55automatically. So overall, whenever we
18:58have an AI workflow or a background job
19:01in this course, this is where it's going
19:03to live. Now here we can tell there are
19:05a bunch of different use cases. You can
19:07take a look at them individually. We'll
19:09be using I think bunch of them in the
19:11incoming sections. We'll even use their
19:13real time um you know the real-time
19:16hooks so that we can show users if you
19:18are analyzing their food you know if you
19:21are getting the macros so on and so
19:23forth. And it is also open source. Here
19:25you can take a look at the codebase if
19:28you are really interested. Now I'm going
19:30to leave the link in the description.
19:31Let's go ahead and login. You don't
19:33really need a credit card to be able to
19:35follow along because they have a really
19:37really generous tier that you don't
19:40really need to pay anything to get
19:42started with. And this video is kindly
19:44sponsored by trigger.dev. So, I'll go
19:47ahead and log in. I'll be using my
19:49GitHub account, but you can really use
19:51anything that you wish in this case. So,
19:53here I'm in my dashboard, and as you can
19:55tell, I already have the test project.
19:57This is something that I have created
19:59before recording this video, but we will
20:01just create one from absolute scratch.
20:03So, probably this is what you're going
20:05to see when you first log in after the
20:07onboarding. Let's go ahead and give a
20:09project name. So, I'll just try to zoom
20:12in. I'm going to say like maybe cali
20:16clone just like this.
20:20So, here I think you can leave them, but
20:23let's just say what are we working on?
20:26Let's just say AI agent.
20:29We are using expo. And then the last
20:32question is what are you trying to do
20:34with trigger.dev? I think here I'll just
20:36say ship a production workflow. Then we
20:39can create this. Now it's going to show
20:41us the instructions to set this up,
20:43which is something that we'll get into.
20:45First, let's go ahead and go back to VS
20:48Code here. Before I answer any of these
20:51questions, I think I'll open up my
20:52terminal and I'll just generate an expo
20:55application. Now, for this you can visit
20:58expo.dev/documentation
21:01and we can just copy this. So here it
21:03says mpx create expo app at latest and
21:07I'd like to initialize it under the
21:10current folder. So I'll just put dot at
21:12the end. Now we could ask cloud to run
21:14this as well. But here I'd like to show
21:16you something which is that if you want
21:19to test this out in your actual phone,
21:21you need to go with the SDK 54. But
21:24otherwise, you need to go with the
21:26latest SDK and this is the recommended
21:29for most projects. So in my case, I'll
21:31be going with the SDK 57.
21:35Then this will basically bootstrap a
21:37project.
21:39Now while this is installing I think we
21:41can shrink the terminal and answer these
21:44questions. So for the back end you can
21:47read the question but basically we would
21:49like to use the expo API routes. So
21:52instead of building a separate you know
21:54separate back end we can literally use
21:57the expo API routes. If you have ever
21:59used Nex.js it is the similar concept.
22:03So, we're going to have an API folder
22:05within the app and we can run our
22:07backend code.
22:10Okay. For AI workflow, we'll be using
22:12trigger.dev and you know their real time
22:15features. For AI model, I think I
22:19already have the OpenAI subscription.
22:22So, I'm going to be selecting this one.
22:24As you can tell, Cloud recommends
22:26itself, but I'll go with OpenAI,
22:29you know, GPT. And then here it says
22:32what does V1 is done actually mean for
22:34you? Now I think this is such an
22:36important question. Basically for V1 I
22:39always want to have something that is
22:41super simple and just working. Once I
22:44have a basic version in V1 then I can
22:48you know prepare it for the real app
22:50store launch or you know I can add the
22:53payments privacy policy so on and so
22:56forth. here. We would like to just have
22:58something that is working with a nice UI
23:01design, right? So, I'm going to go ahead
23:02and select this and we'll submit the
23:05answers. Now, of course, we're going to
23:07get more questions. It is not just a
23:10simple four question batch. If you take
23:13a look at the prompt here, we say ask me
23:15questions in small batches like three to
23:18six at a time. And it's going to be
23:21grouped by the topic, right? So here
23:24we'll just get more and more questions.
23:26Now while cloud is thinking about the
23:28questions, let's set up the other tools
23:30that we'll be using. We have neon.com
23:34which will provide a free Postgress
23:36database for us and it's going to be
23:38deployed on the cloud. Again, I'm going
23:40to leave the link in description. You'll
23:41get, you know, free plan, free credits,
23:44and just go ahead and log in. It's
23:46completely free to get started with.
23:48Once again, you don't really need a
23:50credit card. In my case, I'll be logging
23:52with my GitHub account and I already
23:55have bunch of different projects. But
23:57what you'll be doing is pressing this
23:59button. We'll say create a new project
24:02in here. As you can tell, I have Cali
24:05test. But now I'll just say Cal AI pro
24:08which stands for production. Then here I
24:11think you can, you know, choose
24:13anything. I'll leave everything as a
24:14default. Okay, we're going to create
24:17this. Then we can get our environment
24:19variable. In a second, we'll basically
24:21copy and paste this to our env file.
24:24Then we'll be using image kit for image
24:27storage and for any kind of image
24:30optimizations and transformations. So
24:33here again you'll have the link go ahead
24:35and login. You'll get the public key,
24:38private key and then there is the
24:40endpoint URL. You can basically grab
24:43them under the developer options and
24:45they have bunch of different SDKs.
24:47basically SDK for anything and
24:50everything. In our case, we'll be using
24:52Expo or I think NodeJS in this case. Let
24:56me see where that is. Yeah, it's going
24:58to be this one. We'll get into the
25:00documentation in the incoming sections.
25:02So, first off, go ahead and get your
25:04public key, private key, as well as the
25:07URL endpoint. I think I can show you
25:09what to do with them in the incoming
25:11minutes. But basically, when you first
25:14press this, it's going to ask you to set
25:16up your password. Once you set this up,
25:19you'll just go ahead and submit this.
25:21Then you'll be able to copy this key.
25:23Okay. The very last tool that we're
25:25going to set up is going to be Sentry,
25:27which is basically the error tracking
25:29and monitoring platform that we'll be
25:31using. Now, Sentry is much more than
25:34this, but we'll get into the details in
25:36the incoming sections. And basically
25:38they are the number one as you can tell
25:40from the testimonials. Any big company
25:43like Slack, Cloudflare, Versel, Linear,
25:46even like GitHub, they're using Sentry.
25:49So go ahead and get the free credits
25:52with the link in the description. I've
25:54partnered with them. So they'll give you
25:56like $80 for free in credits. So here
26:00I'll go ahead and log in. Then we will
26:03create a project. Maybe we can do it in
26:06the incoming sections. Okay, so these
26:08are all the tools that we're going to
26:09set up. As you can tell, I have bunch of
26:11different projects, but we're going to
26:13create one from absolute scratch in the
26:15incoming sections. So, let's go back
26:18into cloud and we'll answer the next
26:22batch of questions. So, here you can
26:24pause the video and take a look at this
26:26question. Basically it says who is going
26:28to compute the daily calorie targets
26:31from these information which is going to
26:33be passed in the onboarding. Now most of
26:36the time the recommended option is the
26:39way to go but here of course this is
26:41this is not what I'd like to have. We
26:43would like to generate these targets
26:46with AI. So I'm going to press this one.
26:48And the next question is what order do
26:51onboarding oath in the app come in? It's
26:53going to be in this exact order. This is
26:56how my actual application works as well.
26:59So first off, we walk through the users
27:01with the onboarding process before they
27:04even authenticate. And then at the end
27:06of the onboarding, we ask them to
27:08authenticate so that we can save their
27:10data, you know, their progress. And then
27:13once they're authenticated, we'll take
27:14them to the home screen. So here it
27:18says, how does the mail photo get to
27:20image kit direct from app? So this is
27:24the recommended like this is what claude
27:26says. So here we can tell this is the
27:28fastest option and this is what claude
27:31is recommending. So I'm going to go
27:32ahead and select this one. Then for the
27:35corrections it says after the AI returns
27:37macros what can the user do about it?
27:42Okay. So maybe they will be able to edit
27:44the macros manually.
27:47And also I'm going to be selecting this
27:49option. This is completely up to you how
27:52you want this application to work. Now,
27:54in your case, you might be getting
27:55different questions as well. It's
27:57completely fine. Just go ahead and
28:00answer them depending on what AI asks
28:02you. Now, again, the goal of this
28:04tutorial is not getting the exact same
28:07end result. But instead, I want you to
28:10show, you know, I want to show you my
28:12workflow that I'm using that I have used
28:15to deploy my app in 14 days. Right? So,
28:19at the end of like 20 days or even like
28:2219 days, I got my very first client by
28:25using this workflow. And this is the
28:27goal. This is what I want to teach you
28:29instead of getting the exact same end
28:30result. Okay. So, with that said, I'm
28:33going to go ahead and submit these
28:35answers as well. I think we're going to
28:37get a batch of different questions once
28:41again. And at the very end, I think
28:44Claude will generate a planet. MD file.
28:47So it's going to be somewhere right
28:49here. Then we will follow that plan step
28:52by step. So this is the next question
28:54that I have. And here I don't really
28:56want to go with the recommended option
28:58because in my actual application this is
29:00not how I set that up. So here it says
29:03first off user will go through the
29:05onboarding questions. They will sign up
29:07and then they will see building your
29:09plan UI. But in my application first off
29:12they go onboarding questions. then they
29:15would see building your plan and then
29:17they would sign up. So this is what I'm
29:19going to say here. I'll say first of
29:23user will go through the onboarding
29:26questions
29:27then we will show
29:32the
29:35building your plan UI right so here let
29:38me just say UI
29:41and then
29:44they will sign up and we will store that
29:50calculated data to database. Okay, so I
29:53hope that makes sense. If not, we're
29:55going to see it in the incoming sections
29:57when we when we actually built this
30:00feature. Okay, so I'm going to say
30:02that's my answer. Let's go to the next
30:05question. AI targets are in
30:07deterministic, which is fine. So I'm
30:09going to select this option. And OpenAI
30:12is extremely cheap when it comes to this
30:15use case. So, I think for every single
30:18run, we will just spend like $0.01,
30:21like almost nothing. And I'm going to
30:24show you that in the incoming sections
30:26in the OpenAI dashboard.
30:30So, the next question is, what does the
30:32home screen show? I think we're going to
30:34show the calories rank macro bars. Let's
30:38just select bunch of them. Horizontal
30:40date stripped.
30:43Today's log meals list. Absolutely. Yes.
30:45And we can have the streak counter. So
30:49basically this is a similar thing that I
30:51want to have. Let me just scroll to the
30:52bottom
30:55like this is the UI that I generated
30:57with AI for my own application. I know
31:00it's a bit hard to see it but basically
31:02we will try to generate this again. I'm
31:04going to show you how to do it. So with
31:07this I'm going to go to the next
31:09question. we can get the device time
31:11zone and it's going to be stored per
31:14user. Okay, so that's the recommended
31:17option and this is what I have actually
31:19that's what that's sorry that's actually
31:21what I want to have here. I'll go ahead
31:23and submit the answers. So here we got
31:26the next batch of questions in this
31:29case. Please feel free to pause the
31:30video and read it. You can go with the
31:32recommended option. I think this is what
31:34I would do in production but this is a
31:36tutorial so I'm going to be going with
31:38this option. Okay. So like even if you
31:41select this one, Cloud will be able to
31:43implement it with no issues. But you
31:45know instead of taking 10 minutes, we
31:47can we can handle it in 2 minutes,
31:50right? And just save some time within
31:52this tutorial. For the camera UX, like
31:56user hits the shutter, what do they see
31:58next? We would like to see an optimistic
32:01card fills and live. I think yeah, we
32:04can go with this one. So we're going to
32:06have the real time data coming from
32:08trigger.dev and I'm going to show you
32:10how to implement that. So I'll just have
32:12this option on AI failure. I think like
32:17mostly you would get the first option
32:18but let's try to read it. Couldn't
32:21identify this. Yeah, I think we can re
32:24retake the photo because if you think if
32:27user just take a photo of the wall there
32:30is no food, right? So we will not be
32:33able to identify it. So I think we can
32:35go with this option and we'll just say
32:37you need to retake it. But maybe user
32:40took the actual photo of the food. So in
32:43this case we would like to auto retry at
32:46least once, right? So I'm going to
32:48select these options. You can go with
32:50the other options, but this is what I'm
32:52going to be having for now. I don't
32:54really want to implement any payments or
32:56any payw walls. Um let's just see not
32:59really no push notifications. We would
33:01like to just keep this simple for the
33:04version one like these are the things
33:06that you can implement once you complete
33:08this tutorial and actually these are the
33:11things that we have implemented in our
33:13school community like we have done the
33:15payw wall with revenue cat we have done
33:17the push notifications with expo and you
33:20know we even have the weight history
33:22water and exercise if you're interested
33:25you can double check that within our
33:27school community but these are the
33:29things that I'll just skip for this
33:32project because we just want to have a
33:34simple V1. So I'm going to say skip
33:37these for V1.
33:40We just want to have a working MVP.
33:47Now the next question is about the RM.
33:50I'll be using terrizle RM. we'll be
33:52using 10 stack query native wind which
33:55is basically tailwind but for react
33:57native and for the development builds we
34:00would like to use EA as development
34:02build now I'm going to get into that
34:04what that means basically if you're
34:07building an actual project you would
34:09like to create a development build then
34:12using the expo go application because
34:14this is just for learning purposes it is
34:17for demo projects when you have an
34:20actual application
34:22like you cannot just use expo go okay so
34:24it's for learning purposes in our case
34:27we'll be using ES development build and
34:30you know this is something that I'll get
34:32into in the incoming sections so for now
34:35let's go ahead and say submit the
34:37answers all right so we just got the
34:39very last batch of questions let's go
34:41ahead and answer them so here it says
34:43clerk owns identity and neon owns the
34:47application data how does a clerk user
34:50become a row in our users table here.
34:52I'd like to visualize it before we get
34:54into it. Basically, if you think about
34:56that, our users will sign up through
35:00clerk, right? So, here I'll just go
35:01ahead create a user. Let's say they sign
35:04up through a clerk. Well, we don't
35:06really have this user in our database.
35:08How do we take it and save it to here?
35:11Now, the best way of doing it is using
35:13something called web hooks.
35:16And this is this is what we'll be using
35:20because it's the you know the production
35:22way of doing it and I want to show you
35:24that. So we will be running these web
35:26hooks. They're going to be coming from
35:28clerk and we'll run a function in the
35:31background in trigger.dev.
35:33So like we'll get into it in a couple of
35:36minutes or in the incoming sections. So
35:39here I'll just say maybe other option.
35:42Let's say cleric web hooks and
35:44trigger.dev
35:47background jobs.
35:50So here is the next question. I'll be
35:52going with this one. I have already read
35:54this entire thing. So I'm going to
35:56select everything. And then for the mail
35:58data, let's just say we would like to
36:00have the mail name, calories, and you
36:02know protein, carbs, and fat. for the
36:06done part what we'd like to do. I'll
36:09just say for now we don't really want to
36:11have any test suits. We'll just manually
36:14test it. Okay, we'll just submit this
36:17and hopefully we're going to get a plan
36:20MD file in a couple of seconds. Now,
36:22while Claude is building the plan MD
36:25file, there are two different things
36:26that I want to talk about, which is the
36:28agents.md as well as cloud.md. Let's go
36:32back into diagrams. I have this. Let's
36:34just try to read it out loud. So, first
36:37off, what they are in the first place,
36:39they are both plain markdown instruction
36:42files that get autoloaded into the AI's
36:45context. So, you can think of it like
36:47the readme file, but for AI agents. So,
36:51here they're going to be loaded at the
36:53start of every single session. So this
36:56is where you put project conventions,
36:59the architecture notes, you know, things
37:01like always do this, never do that, that
37:04kind of rules. And the difference is
37:07just who reads them. So cloud.md is
37:10built for cloud specifically, but
37:13agents.md can be used for any single
37:16like any kind of agent. So what I do is
37:19usually I put every single instructions
37:22under the agents.md. Okay? And then I
37:25put a reference from cloud to this file.
37:29And this is exactly what we have
37:30actually. If you take a look at that,
37:32you know, we'll have bunch of different
37:34instructions. Let me just show you. So
37:37here we'll have bunch of different
37:38instructions. And then from cloud.md,
37:41we'll just say go ahead and read this
37:43file. Okay, so that's the general idea.
37:46You can pause the video and read it.
37:48This is what I do. I put my actual
37:51instructions in the agent md file. Then
37:54I just add one line import within the
37:56claw.md just like what we have right
38:00here. And here once again this is the
38:02file that will be loaded at the
38:04beginning of every single session. So
38:06here when you just say something like
38:08you know implement me this feature
38:10before cloud runs this it's going to
38:13read the agents.md file. Okay. So again
38:16I just want to visualize this. Let's say
38:19this is you. You ask something to AI. AI
38:22answers. then you ask something else so
38:24on and so forth. At the beginning of
38:26this conversation, the agents empty file
38:30will be loaded. Okay. So here claude
38:33will always read your instructions that
38:35you have under this file. All right. So
38:38other than this we got the plan as you
38:41can tell this is generated by claude.
38:43Now what I would usually do I would
38:45definitely read this from start until
38:48the end and only then I would say auto
38:50accept or if I don't really like
38:53anything I'll just say let me try to
38:56manually approve edits or you know keep
38:58planning. This is what I have done when
39:00I was building my own project but here
39:03let's just keep it short and simple.
39:05I'll just trust AI. Okay, once again,
39:08you definitely want to take some time
39:10and go through this entire file for like
39:1310 to 15 minutes so that you don't
39:16really have anything that you don't like
39:18in the first place. So, in this case,
39:20I'm going to say yes and auto accept.
39:22It's going to take that plan, you know,
39:24summarize it and put it under a plan
39:27empty file with to-dos. Okay. And every
39:31single time,
39:33like, let me just maximize the screen.
39:35Every single time when we want to build
39:37a future, we will just add like a check
39:41mark, right? So let's say we implemented
39:43the authentication or whatever this is,
39:46we'll just add a check mark right here
39:48and then we'll move forward until this
39:50entire file is completed.
39:55So here I'll go back into cloud.md.
39:58Let's just see what's going to happen.
40:01So here I think it asks me to install
40:03clerk. For now I'll just say no really
40:05don't do anything and for now we just
40:08have the plan MD file. What I'll be
40:11doing is actually call this all
40:12uppercased which is just a preference.
40:14This is what I'm going to have. Now we
40:16are going to take this plan and
40:18depending on this plan we would like to
40:20generate the UI design because if you
40:23remember that's the workflow that we are
40:25going through. So, first off, we got our
40:27plan. We described our project. You
40:30know, we defined the idea, goals,
40:32features, pages, so on and so forth. Now
40:34that we have the plan, it's time to
40:36generate the UI design. I'm going to
40:38leave this for the next section. For
40:40now, let's go ahead and just create a
40:43GitHub repo and push our code into that.
40:47So, here I'll just say go ahead and
40:49create a new repository. I think this is
40:54how we can do it.
40:55github.com/new.
40:57For the name, I'll just say keeli
41:00tutorial.
41:03For now, I'll make it public. Sorry, for
41:06now, I'm going to make it private, but
41:07at the time that you're watching this
41:09video, it's going to be public. So, the
41:11source code will be for free. Okay, I'm
41:14just going to say create the repository.
41:19And then I'll get the you know this
41:22command which basically will take an
41:24existing repository from the command
41:26line and then it'll push it to this repo
41:29here. I'll open up my terminal. I think
41:32we don't have anything up and running.
41:34If you want to run this app, we are
41:35going to be running one of these
41:37commands which is something that we'll
41:38do in the next section. For now I'm just
41:40going to clear this up and let's go here
41:43and I'll just say add this to the, you
41:46know, staging area. Let's get a commit
41:49message with AI. You can type this as
41:51well by def, you know, by hand, but I'll
41:54just generate it with AI. And let's say
41:56commit our changes. And then we can
41:59basically just paste this in into our
42:02terminal, which will take everything
42:04that we have locally and it's going to
42:06push it to this repo. Okay. So here you
42:11can tell we have our code up and running
42:13on GitHub. So with this in the next
42:16section we're going to get started with
42:18the actual UI design using AI and once
42:21we have the UI design we'll implement
42:23these features one by one. So I'll see
42:26you in the next lesson. All right. So
42:28now that we have our plan file ready it
42:31is time to get started with the UI
42:33design. Now I want you to visit the you
42:36know this document that I'll provide in
42:38the description. Scroll to the bottom
42:40and you're going to find the calorie
42:42tracker app UI prompt. So here you can
42:45basically copy this entire thing
42:50and then we'll go back into cloud right
42:53here. I'm going to say
42:56just go ahead and read the plan. MD file
42:59that I have and then depending on our
43:01application, depending on our plan, I
43:04want you to generate me a prompt similar
43:08to this one that I just provided.
43:13And then right below to it, you would
43:14like to paste this prompt. So it's going
43:17to basically take a look at your plan,
43:19which screens you have, you know, what
43:21features, so on and so forth. And it's
43:23going to create a prompt similar to this
43:26one, but instead of making it random, it
43:30will actually it'll be coming from your
43:33actual plan. And then we're going to
43:36copy this prompt and paste it into a AI
43:39image generation tool. In my case, I use
43:42GPT, but you can also use something like
43:45Gemini or really anything that you wish.
43:48And while this is giving us the prompt,
43:50I'll go ahead and show you kind of like
43:52the things that I that I have done in
43:55the past. So, this was couple of months
43:57ago where I provided this prompt and
44:00that was the end result that I just got.
44:02Now, the UI is definitely not ugly, but
44:06it is just too colorful and I didn't
44:08like it at all. So I said, "Let me just
44:10give you a reference image." And in this
44:13case, I used the actual Kelly
44:15screenshot. And then I said, you know,
44:17make it similar to this one where we
44:19would like to have the light mode. Um,
44:22you know, get rid of the blue color
44:23palette and just keep it minimalistic.
44:27And then that was the UI design that I
44:30got or I would say the yeah, the system
44:33design, UI design, couple of different
44:35screens. Um, general idea, right? the
44:39general wipe of this application and
44:41then I said I don't really want to call
44:43it as keli go ahead and call something
44:46like bulky AI and then I had to generate
44:50a logo because I didn't really like this
44:52one then I just went to a different chat
44:55and then I said you know let me just
44:57scroll to the top I provided this
44:59example and I found this randomly on X
45:03or on Twitter I would say and basically
45:05I just said you know get inspired by
45:08these logos and generate an image of
45:10grid of 12 logos for a fitness bulking
45:14app. But I didn't really like any of
45:15these results. So I pasted Cali. You
45:18know, I said get inspired by this Apple
45:22logo. But then turns out it just gives
45:24me apples only. Then I said make it
45:26something different than Apple. So here
45:28I just follow up couple of different
45:30times and eventually I was happy with
45:34this end result. So I said, you know,
45:37make it black and white, no purple
45:39color. Yeah, eventually I just said, you
45:42know, make it transparent background and
45:44give me dark and light modes. And then I
45:48would copy this image from right here.
45:50And then I say, you know, integrated
45:52into the design itself here. You can
45:55tell that's what I got. So this is kind
45:57of like the workflow. This is what you
45:59would like to do. Get the prompt, right?
46:02So I'll just show you the VS code. Okay.
46:06So here we have the entire prompt. You
46:08will get the prompt, paste it, and then
46:10do a couple of different variations. If
46:12you don't like the very first result,
46:14you can add an reference image and then
46:18generate your logo integrate into it.
46:20Then once you have, you know, once you
46:23have the system design, then you can ask
46:26for the screens individually. Like in
46:28this case I just said give me all the
46:31screens for on boarding. So let me try
46:34to zoom in. First we ask for the gender
46:37right then for the height weight you
46:40know what's the goal so on and so forth.
46:43And now if we want to build any of these
46:45screens we can just upscale them
46:47individually and give it as a task to
46:50cloud. And this is something that we'll
46:52get into here. I'm just trying to
46:54explain you the workflow. So the rest of
46:57it is basically the same thing here. I
46:59take a screenshot from Cali as a
47:02reference image and I say this is kind
47:04of like the welcoming screen that I
47:06would like to have and I say you know
47:09give me a similar thing to this one
47:11here. You can take a look at my prompt.
47:14That was the end result that I got. I
47:16said remove the language thing right
47:19here and just keep it simple. Then once
47:21you have the design you can copy it and
47:24paste it into your VS Code. Let's
47:26actually do it. You can get this from
47:28the source code. I'll explain you in a
47:30second. So basically go right here,
47:32create a folder called design and then
47:35you can find this file from source code
47:38under the design folder. And I'm going
47:40to call this as welcome screen UI
47:44design.
47:47Okay. So here you'll just ask cloud to
47:49implement it as the welcome screen. And
47:52you're going to see in a couple of
47:53minutes that you know cloud will
47:55basically clone this 100% correctly. And
48:00then now you might be asking how do we
48:02get this image right? So you can just
48:04ask GPT say something like you know
48:07generate the phone image where the
48:09camera is open. Basically I'm explaining
48:12this image and then I say make it to be
48:14a transparent background so that I can
48:16use it without any issues. And then you
48:20will install this image. Again, you can
48:22grab it from the source code if you are
48:24really interested. Here, instead of
48:26putting it under the design, I'll put it
48:28under the assets, under the images.
48:32And then I'll say something like welcome
48:35screen UI.
48:38Let's just say demo image.
48:42Okay. So, that's kind of like the
48:45workflow that we'll be implementing. And
48:48let's actually first get started with
48:50this simple
48:52simple screen. Okay. So here let's go
48:56into cloud. I'm going to be explaining
48:58this in a second. Like I'm just going to
49:00say take a look at this image and try to
49:03implement it. But before that again
49:06there is a kind of like a workflow that
49:09I use to copy UIs 100% correctly. And
49:13let me show you that pretty quickly. So
49:15this is what I call the build and verify
49:18loop. And here is how that work.
49:20Basically, we want to build a feature.
49:22In this case, we just want to copy this
49:24entire UI. And before we try to copy it,
49:28what we do is this. We take a screenshot
49:31from the simulator right from our phone,
49:34which is something that we will run in a
49:36second. And then we compare it to this
49:39design. So cloud will take a screenshot
49:43of the phone, right? the UI design that
49:46we are trying to build and it's going to
49:47compare it to this one and if it is not
49:51really identical it is just going to
49:54rerun this loop again and again until it
49:57is identical. Now this is AI you cannot
49:59really trust it 100% like that doesn't
50:03mean the UI will be you know 100%
50:06identical but it's going to be pretty
50:08close like very very similar. Okay, so
50:12that's kind of like the loop that we
50:15will try to go through and we can
50:17explain this to cloud in simple terms.
50:20Okay, so with this in mind, let's first
50:22try to run this application. I'll open
50:25up my terminal, clear this up and we can
50:28just say MPX expo run or just even MPX
50:33expo start.
50:37So this is going to run our application.
50:39Let me open up the simulator
50:44and then I'll press I. Since I'm on Mac,
50:47I would like to open this up on iOS, but
50:50if you're on Windows, you would press A.
50:53That would open it up in in Android.
50:56Okay. Here you can just
50:58um we have a question. I'll just press
51:00enter. It'll install the Expo, the
51:03latest version. All right. So here you
51:05can tell I have my simulator and I have
51:08this application up and running. But now
51:10the thing is this is running in expo
51:13which is fine for basic projects for
51:16learning purposes. But if you want to
51:19build a real world project this is not
51:21going to be enough. So in that case we
51:23would like to get what we call a
51:26development build. So here I have bunch
51:28of different things. Please ignore them.
51:31And we will basically get this entire
51:34application not within the expo but as
51:37if it is a separate application. And
51:40it's really easy to implement. First off
51:42you need to install a package and I'd
51:44like to show you this. So it is called
51:46expo dev client.
51:52If you're interested you can take a look
51:54at the documentation in more detail.
51:57Basically, you'll like to copy this and
51:59paste it right here. We'll install this
52:02package and then we will basically build
52:05our application. So, in this case, I'm
52:08on iOS. You'd like to copy this and
52:10paste it to your terminal.
52:14For the first time, this is going to
52:16take some time, but then it should be,
52:19you know, faster for the next
52:20iterations. And this will create an iOS
52:23folder which will be the native code for
52:26this application.
52:29Okay. So if this is confusing like
52:31overall just understand that if you want
52:34to build a realworld application,
52:36Expoggo is not going to be enough
52:39because you're going to have a lot of
52:40complex features and native modules.
52:45You can use Xpogo for basic apps but not
52:48for real world projects. And that's
52:50where development build comes into play.
52:53In this case, you just need to install
52:55one package and rebuild your
52:58application. And that's that's the
53:01entire thing. So here after a couple of
53:03minutes here, we can tell we got our own
53:06development build. It is called KAI
53:09tutorial. So by default, it's going to
53:11be called as your folder name. And now
53:13if you say open, it is just going to
53:16open this application. Now notice how it
53:18is not really running this within the
53:20expo go.
53:23So here I'll just try to close this
53:27like let me just close everything
53:31and open this up like it is the same
53:33application but it is not really running
53:35within the expo. Okay so that's kind of
53:38like a small detail but now we have our
53:41application it is up and running. we can
53:43get started with this welcome screen UI
53:46design here. I'll go ahead and open up a
53:49new chat within the cloud and then I'll
53:52just try to explain what we want what we
53:54want to do. Now before we try to explain
53:56anything, let's go ahead and set up the
53:58native event. So here I'll go ahead and
54:01visit nativevent.dev.
54:03Let's visit the documentation. So in
54:06this case I'll be using version 4. at
54:09the time that I'm recording like version
54:11five is in pre-release. So I'll just be
54:14using the more stable version. I'll copy
54:16this entire documentation. Okay, this
54:19entire page and this is what we have in
54:21the you know age of AI. Basically
54:24instead of reading everything you just
54:26copy it and paste it to AI and it's
54:29going to implement that. So here I'll
54:31paste this in and at the very end I'll
54:33just say I have just attached the
54:36documentation of native wind step by
54:39step I want you to follow it and
54:42implemented in this codebase don't do
54:45anything extra or less just follow the
54:48documentation and make sure that native
54:51event is working in this project.
54:55Okay, so we can send this and if you
54:58have any other you know tasks you don't
55:01really need to wait for this. You can
55:03just re you know run another instance
55:06but what I mostly do is just doing one
55:09task at a time so that I can you know
55:12manage everything and like I don't
55:14really rush anyways. Okay, so we're
55:17going to get the native wind
55:18installation. I think we can close this.
55:21We don't we are not going to really need
55:22it. But if you're wondering what's going
55:25to happen is that cloud will install all
55:27these packages you know set up the
55:30config file update the global CSS babel
55:33file so on and so forth and eventually
55:36it should work out now while native wind
55:39is getting implemented I think we can go
55:41ahead and try to explain this loop to
55:43cloud here is my prompt and by the way
55:46I'll give the permissions here's my
55:48prompt this is what I say I say in this
55:51application we would like to have a
55:52welcome come screen. Basically, when
55:54users open this app, this will be the
55:57first thing that they're going to see.
55:59And here I say for the UI design, I'm
56:01going to attach you this image and I
56:04want you to put yourself into a loop
56:06like you can read the prompt. Basically,
56:09it's going to take a screenshot from the
56:11simulator and then compare it to this UI
56:14design. And it's going to be doing this
56:15until they are both identical, right?
56:18And I think one of the things I forgot
56:21so far is providing the logo. So let me
56:24go ahead and get this logo. And if you
56:27want to use it, you can grab it from the
56:30source code. So under the assets, under
56:32the images, we're going to have
56:33logo.png. All right. So looks like
56:35native wind has been wired up and cloud
56:38says I have already kind of like
56:40verified it. So everything is working as
56:43expected. I have got this logo called
56:46logo dark.png png and we will be using
56:48it in the home screen just like this
56:51one. If you wanted to, you can grab it
56:54from the source code or use your own
56:56logo for this application. I'll just
56:58attach this to the chat right here. I'm
57:02going to press add and then let's say
57:04logo dark.png.
57:07Not this one really. Let's say at logo
57:10dark.png.
57:12Okay. And for the permissions, I'll just
57:15say auto. which is going to really which
57:17is not really going to ask me any kind
57:19of questions because I have I have given
57:22the bypass permission. So I'm just going
57:25to say auto and run this. If you don't
57:28know how to give the bypass permission,
57:30you can open up a new chat and ask to
57:33cloud like how to add bypass
57:39permissions or you know how to enable
57:41bypass permissions
57:44in cloud and then just ask you know go
57:47ahead and do it for me. it is going to
57:50update one line in kind of like a
57:52configuration file and then if you use
57:55the auto mode, it is not going to ask
57:57you any kind of questions. Okay, so with
58:00that said, let's just wait what we're
58:01going to get and I'll just be right
58:04back. All right, so here we can tell we
58:06got the very first version. I would say
58:09it is not really looking identical, but
58:11that's fine. That was the very first
58:13iteration. Now what cloud will do it'll
58:16take a screenshot of this simulator
58:19right and then it's going to compare it
58:22to this UI design and then I believe
58:25it's going to be doing it couple of
58:27different times until we get them you
58:30know have identical I think in the first
58:32iteration it should realize that here we
58:35have three lines and it should be at
58:38maximum two so I think it's going to fix
58:41that if not we can you follow up
58:44manually. But this is a workflow that
58:47works really really fine. And you know,
58:49as I said, I have used this and it just
58:52make it just made everything super fast
58:55as fast as it could be. Now, I think one
58:58of the other feedbacks that I could give
59:00is the font weight. Like here it is much
59:04more thinner and I think it looks more
59:06elegant, but this is like a bit too too
59:10much. Like I think this is a font weight
59:12of let's say 500. But what we have right
59:15here is like probably 700. So we could
59:18go ahead and follow up with it in a
59:20couple of minutes once this is done. All
59:22right. So this is the second followup. I
59:25think this looks way cleaner than the
59:27very first version. Now we have two
59:30lines. The font weight has been decored
59:33like it is it is almost identical to
59:36what we have right here. So with this, I
59:39think it is still trying to compare it,
59:41but I am pretty happy with the end
59:43result. I think it just looks pretty
59:46much identical. Now, while Cloud is
59:48trying to make it even better, let's go
59:51into GPT. And here, if you remember, I
59:54asked GPT to generate all the screens
59:58for onboarding. But here, you can tell
1:00:00that they look pretty small and it is
1:00:02too much information to give cloud at
1:00:05once. So what I have done is saying
1:00:08something like you know give me the
1:00:10first five screens. Let me find it. So
1:00:13here I say upscale the first five
1:00:16screens of onboarding. So here this is
1:00:20what we're going to start with. When
1:00:21user says get started then this will be
1:00:24the next screen. Next. So on and so
1:00:27forth as you can tell. And then after
1:00:29the first five screens, I said upscale
1:00:32the next five screens of onboarding as
1:00:35well. Right now what I'll be doing, I'll
1:00:38basically copy this image and then I'll
1:00:42paste it into cloud or actually to my
1:00:45codebase. You can grab it from the
1:00:47source code, but you know you can use
1:00:50your own images as well, your own
1:00:53designs. Here I'm going to paste it
1:00:56under the design folder. And I think I'm
1:00:58going to call it something like maybe
1:01:01onboarding
1:01:04one slash or 1-5.
1:01:08Then I'm going to get this image.
1:01:12Okay. So I think instead of getting this
1:01:15one, wait, let me just find it. Instead
1:01:18of getting this one, I'm going to get
1:01:20that one because here we say, you know,
1:01:22keep everything as it is, but remove the
1:01:25skip for now button. Previously, we we
1:01:28had this uh we had this text, which is
1:01:31something that I don't really want to
1:01:32have. So, I'm going to just copy this.
1:01:34Let's try to paste it right here. And
1:01:37I'm going to delete this previous file.
1:01:43Okay. So basically, we just got the
1:01:45exact same image, but without those
1:01:48buttons that says skip for now. Okay. So
1:01:52with that, I think I'm going to do the
1:01:54same thing for the next screen.
1:01:58And then I'll just paste it right here.
1:02:00And this is going to be, let's say,
1:02:02onboarding from 5 to 10.
1:02:08Just like that.
1:02:11All right. So Claude is still trying to
1:02:13do something but I'm pretty happy with
1:02:15how that look. So I'm just going to
1:02:17pause it manually and then I'll say when
1:02:20user press the get started button I want
1:02:23you to go ahead and implement the
1:02:26onboarding screens. So it's going to
1:02:28start by asking these questions like
1:02:31first let me zoom in. We are going to
1:02:33ask the gender, height, weight, so on
1:02:36and so forth. So here I'll go ahead and
1:02:38just talk with claude try to explain it
1:02:40simply. Okay. So so far the welcome
1:02:44screen looks perfect. Do not change
1:02:47anything about it. But when users press
1:02:50the get started button we would like to
1:02:52start the onboarding process. Just like
1:02:55what we have explained in plan MD file.
1:02:59And for the UI design, I'm going to
1:03:01attach you two different screens where
1:03:04we have around 10 different onboarding
1:03:07pages or screens I would say. I want you
1:03:10to implement them. Try to copy them as
1:03:14much as possible and put yourself into
1:03:17this verify loop so that you can take a
1:03:21screenshot from the simulator and then
1:03:24compare it to the UI design.
1:03:28Okay. So here I'm just going to attach
1:03:30those images which is onboarding one to
1:03:33five and let's say onboarding 5 to 10
1:03:37and then I'll follow up. Now these
1:03:40images are just references for UI
1:03:44design. You do not really need to ask
1:03:46the exact same questions. Just make sure
1:03:49to ask the questions that we have in
1:03:52plan.md.
1:03:56Okay, so with that said, I think I'm
1:03:58just going to full send this and let's
1:04:00see what we're going to have once Claude
1:04:03is done with it. All right, so this is
1:04:05taking a bit longer than usual because
1:04:07we have bunch of different screens and
1:04:10basically Claude is just going through
1:04:13the entire process by itself. As you can
1:04:15tell, I'm not pressing, but it selects
1:04:18the options for every single screen. And
1:04:21then here we can tell eventually it says
1:04:24you know these are your targets and I
1:04:28think it is still testing this out.
1:04:31Eventually once this is done we will
1:04:33integrate the authentication and I think
1:04:35we can get our API key from OpenAI. So
1:04:39I'll just wait for this entire loop to
1:04:41be completed. Once it is done I'll just
1:04:43be right back and then I'll walk you
1:04:45through the next steps. All right. So
1:04:47looks like Cloud has implemented the
1:04:49entire UI design. Let's go ahead and
1:04:51give it a go. When I say get started, we
1:04:54have these options. Let's go ahead and
1:04:56just take a look at them. Everything is
1:04:59working as expected.
1:05:04So here, let's say this is my current
1:05:06weight. I want to gain weight. So I want
1:05:09to be something like this. Let's say I
1:05:12think this UI could be improved. Like
1:05:14this is not the best UI if I have to be
1:05:16honest, but I think it's fine to get
1:05:19started with. Let's say I'm very active
1:05:23and
1:05:25for weekly let's say I just want to get
1:05:27to one kilo per week which is aggressive
1:05:30but that's fine
1:05:32let's say classic diet
1:05:34then this is going to run in the
1:05:36background where we actually get the
1:05:38values with open AAI and once we say
1:05:42continue here we should be on the
1:05:44authentication page
1:05:47and for the authentication we are going
1:05:49to be using clerk. Let's go ahead and
1:05:51set this up. First off, we need to
1:05:53create the env file. And within this,
1:05:57we're going to have some environment
1:05:59variables. So, first off, head over to
1:06:02clerk.com. I'll put the link in the
1:06:04description. It's going to be completely
1:06:06free to get started with. Once you're in
1:06:08your dashboard, just say create a new
1:06:11application. And then for the name, I'll
1:06:13just say Cali tutorial. You can call it
1:06:17anything. And then for the sign-in
1:06:19options, I think I'll just have Google
1:06:22and Apple. Now, if you're having an
1:06:25authentication option like Google, then
1:06:28you have to have Apple as well.
1:06:30Otherwise, Apple will reject your
1:06:32application when you want to deploy it
1:06:34to App Store. And now, just to keep it
1:06:36simple, I'm not going to include the
1:06:38email authentication. So, I'll just
1:06:40remove that. But if you wanted to add
1:06:42more, you can just press these buttons
1:06:45and like that's going to be enough.
1:06:48Clerk will handle everything for you.
1:06:51But for this project, I think both of
1:06:53them are just enough. So I'll say create
1:06:56application. And they give you a prompt
1:06:59where you can just copy and paste to
1:07:02your AI agent. But what I'd like to do
1:07:04is actually taking a look at the quick
1:07:07start. So, usually I would just copy it
1:07:09and paste it, but I want to show you the
1:07:12quick start as well. So, here we would
1:07:15like to use Expo. So, let's go ahead and
1:07:17select this SDK. If you scroll to the
1:07:20bottom, you're going to see that they
1:07:22say you need to get this environment
1:07:24variable. And here, make sure that you
1:07:26select the correct project. So, here I
1:07:29have bunch of different projects from
1:07:31the past, but this is the one that we
1:07:33just created. So go ahead and copy it,
1:07:36then paste it under the env. Later in
1:07:39the video, we're going to have bunch of
1:07:40different environment variables like one
1:07:43of them will be database URL and like so
1:07:46on and so forth. For now, let's just
1:07:49only have the expo public clerk
1:07:52publishable key. All right. So now that
1:07:54we have this environment variable, we
1:07:56can go ahead and implement the
1:07:57authentication just by asking to claude.
1:08:00But before we do so, I think one quick
1:08:02optimization would be getting the clerk
1:08:05skills. So I'll say clerk skills and
1:08:08specifically clerk AI skills. Um this
1:08:12will basically get the upto-date
1:08:15information or the documentation from
1:08:18clerk and give it as a context to cloud.
1:08:23So here I'll just copy this entire file.
1:08:25Okay. And then I'll go into a new cloud
1:08:28instance and then I'll paste this in.
1:08:32And at the very end I'll say something
1:08:34like I have just pasted the entire clerk
1:08:39AI skills page. I want you to install
1:08:41the skills that would be needed for this
1:08:44project. So this is a expo react native
1:08:48project and we're going to be using web
1:08:50hooks as well. So maybe you need to get
1:08:52the skills for back end as well. go
1:08:55ahead and figure this out. Then install
1:08:58the skills for this project.
1:09:03All right. So in my case, it turns out I
1:09:05have already installed the skills
1:09:08globally in my machine. But in your
1:09:10case, if you don't have them already,
1:09:12you will probably get them under the
1:09:14cloud under a folder called skills.
1:09:17Okay? So cloud will figure out to
1:09:19install it. But in my case, as I said, I
1:09:22already have them. Now, just in case if
1:09:25you don't know what a skill is in the
1:09:27first place, basically you can think of
1:09:29them as reusable modular instructions
1:09:33that teach AI agents how to execute
1:09:36multi-step workflows without needing to
1:09:39be prompted from scratch every single
1:09:42time. In this case, like we'll be using
1:09:44skills for authentication, right?
1:09:47specifically with clerk, but maybe later
1:09:50in the video we can get more skills to
1:09:52do different things. Okay, so with this
1:09:57in mind, I think we can go ahead and
1:10:00explain everything to cloud after the
1:10:03onboarding screen.
1:10:06Okay, so currently I really like the UI,
1:10:09how everything works in the onboarding
1:10:11process. But at the end of this process,
1:10:16we should show some kind of a UI where
1:10:20we have the Google and Apple
1:10:22authentication buttons and when user
1:10:25press them, it should actually work. The
1:10:28authentication will be implemented with
1:10:30clerk. I already have the environment
1:10:33variables and we also have the clerk
1:10:36skills. So go ahead and try to try to
1:10:40implement it with a beautiful UI that
1:10:42matches the theme of our actual
1:10:46application. So I keep it simple,
1:10:48minimalistic yet working.
1:10:52Okay, so let's just wait what we're
1:10:55going to get and then I'll just be right
1:10:57back. All right, so Clad has implemented
1:10:59it and it tried to do a real test. So I
1:11:02just stopped it so that we can test out
1:11:04manually. Here I'll go ahead and select
1:11:07some options. Then you know let's see if
1:11:10the authentication will work.
1:11:22So we got the plan. Let's say continue.
1:11:26Okay. Now we are in the authentication
1:11:28screen here. I'll just take a screenshot
1:11:31because I want to add the Google icon
1:11:35right here. I'll follow up in a second,
1:11:37but first let's test this out. So here,
1:11:40I'll just say continue. So here I
1:11:42already have an account because I have
1:11:45used the simulator in the past. If
1:11:47you're using it for the first time, you
1:11:49need to put your email and password.
1:11:51Then for the next login, it's going to
1:11:53be saved and it'll be right here. Okay.
1:11:56So here I'll just say continue. And once
1:11:59we signed up,
1:12:02as you can tell, once we are
1:12:03authenticated, we are in the homepage,
1:12:05which is something that we will update.
1:12:08But let's go back into clerk dashboard.
1:12:11So, it's going to be right here under
1:12:13the users. Hopefully, we should have
1:12:15this user who just signed up. Okay. So,
1:12:19that means the authentication process is
1:12:21working as expected. Now I can say sign
1:12:24out and we are redirected to the again
1:12:29welcome screen. And here if we just say
1:12:31sign in as you can tell we are able to
1:12:34see the screen. Um here I'll just follow
1:12:37up. I'll paste this image and I'll say
1:12:40right next to the continue with Google
1:12:43text on the left hand side we would like
1:12:45to have the Google icon. So go ahead and
1:12:49add it right there.
1:12:52So here we can tell we got the logo and
1:12:55I think this looks way cleaner than what
1:12:57we had previously. So with this I think
1:13:00we can end the section. Basically we
1:13:02have the onboarding process and we have
1:13:06the authentication working as expected.
1:13:08Before we commit our changes, what I'll
1:13:10be doing is going under the get ignore
1:13:13and I'm going to ignore the env file
1:13:16because we're going to have our,
1:13:19you know, secrets. we don't really want
1:13:20to push them to GitHub. So at some point
1:13:24in this file just put the env.v
1:13:30local
1:13:31and we can delete these extra spaces.
1:13:34Okay. So with this now this file has
1:13:37been ignored. Now if we go back to our
1:13:41workflow. So if you go back to our
1:13:43workflow you're going to see that we
1:13:44have already generated the plan. We
1:13:46generated the UI design. Then we break
1:13:49it into specific features and we have
1:13:51built them one by one. So we got the
1:13:54authentication and onboarding in the
1:13:56section. Then we selfch check them
1:13:58within our simulator. Right? So we went
1:14:01through the onboarding process, the
1:14:03authentication screen and you know we
1:14:06tested out everything manually just to
1:14:08double check and make sure everything is
1:14:10working. Now on top of this what you
1:14:12would like to do is running some kind of
1:14:15a code reviewer on your codebase and
1:14:18that would be as you like as you can
1:14:21imagine that would be an AI tool and
1:14:23specifically I would use something like
1:14:26code ravit or there are a bunch of
1:14:27different options but that would be my
1:14:30favorite in this tutorial I'm going to
1:14:32skip that u but if you want to check
1:14:34that out it's completely free to get
1:14:36started with and this video is not
1:14:38sponsored by them like absolutely not
1:14:41they have 14 days free trial and I think
1:14:44you can give it a go if you're
1:14:45interested like just to keep this short
1:14:47and simple I will only skip this process
1:14:51but it's very very simple basically
1:14:53before you commit your changes in your
1:14:56pull request AI would take a look at
1:14:58your codebase and if you're interested
1:15:01in how to use it so if you would be
1:15:03interested in this tutorial I have shown
1:15:05the entire process and I can link it in
1:15:07the description basically like you're
1:15:11going to see how to implement this
1:15:12entire part but other than this
1:15:15everything is working like there is
1:15:18nothing else that we are missing in this
1:15:20workflow okay so with that I'll go back
1:15:23into VS code we ignored the env file I
1:15:28think we can just commit our changes
1:15:32so I'm going to stage everything let's
1:15:34get a commit message.
1:15:42We're going to commit this and let's say
1:15:44sync this up, which will basically get
1:15:47all these local changes and push it to,
1:15:51you know, push it to our repo in GitHub.
1:15:55Let's take a look at that. That was
1:15:56called Cali tutorial.
1:16:00So, here you can tell we got the latest
1:16:02changes just now. Okay. So with that,
1:16:05I'll see you in the next lesson.
1:16:08All right. So this is where we left. We
1:16:10have the onboarding screen which is
1:16:12working as expected. And on top of it,
1:16:14we have the authentication which is also
1:16:16working without any issues. But now
1:16:18there is a problem that we would like to
1:16:20fix. And before we try to fix it, let me
1:16:22try to explain what's the problem in the
1:16:24first place. So if you take a look at
1:16:26the clerk dashboard, you're going to see
1:16:28that we have the user, which is fine.
1:16:30But in our database, we don't really
1:16:32have any data. Specifically, we don't
1:16:35really have this user that is signed up,
1:16:38right? So somehow we would like to take
1:16:40this user from here and save it to our
1:16:44database as well. So we are not going to
1:16:46delete it from here. This is needed for
1:16:48authentication. But we will just kind of
1:16:50like copy it from here and save it to
1:16:54right here. And we want to make this in
1:16:57a way that it's going to be automated
1:16:59because if you think maybe your
1:17:01application will get like 10,000 users,
1:17:04right? You can't really copy them one by
1:17:07one and paste them manually. So for this
1:17:10we have what we call web hooks. And it
1:17:13sounds pretty complicated but it's
1:17:14actually a pretty simple concept and let
1:17:17me try to explain. Okay. So first off,
1:17:20web hooks are some automated messages
1:17:22that are sent when something happens and
1:17:25in this case that something is when a
1:17:28user create it or even delete it. So
1:17:31when user signs up clerk will save that
1:17:34user and then it's going to send a web
1:17:36hook. So specifically an event it's
1:17:39going to say you know a user just been
1:17:42created. Okay, so that's the event name
1:17:44and we're going to get this event name.
1:17:46We'll check. So if it is user created
1:17:49then we'll basically take this user and
1:17:52save it to our database. Now we have it
1:17:54both in the clerk dashboard as well as
1:17:57in our database right
1:18:00and then there are different events like
1:18:02events for almost for everything. So we
1:18:05have user deleted. Let's say user you
1:18:08know just visits the app and it says
1:18:10delete my account. We would like to
1:18:12delete it both from clerk and from our
1:18:15database. And once it is deleted from
1:18:17clerk, clerk will send this event to our
1:18:20endpoint. Then we can delete it from the
1:18:23DB as well. And there is also user
1:18:25updated.
1:18:28So these are the events that we are
1:18:29going to be sub subscribing to which
1:18:31means like we're going to listen for
1:18:33them. So we'll go right here under the
1:18:35clerk dashboard. Make sure you select
1:18:37the correct application. Then go under
1:18:40the configure developers and then you're
1:18:43going to select the web hooks. Now from
1:18:45here we would like to add an endpoint.
1:18:48So here once you press this button
1:18:50you're going to notice that you need to
1:18:52have a deployed URL for your API. Now we
1:18:56are in development. So that means we
1:18:59only have local host. We don't really
1:19:01have a deployed API. So that looks kind
1:19:04of like a problem but there is a quick
1:19:07fix. So we'll be using a platform or a
1:19:10tool that is called Enrock which is very
1:19:13very popular. Just go ahead and log in.
1:19:16It's completely free. And once you're
1:19:18logged in under the domains, you're
1:19:20going to get a free domain that you can
1:19:22use. So I'm going to get into it in a
1:19:24second. But first, let's go ahead and
1:19:27visit the clerk dashboard. From here, we
1:19:30are going to select the user events. You
1:19:32can select them individually or just
1:19:34select all of them at once. Okay. So
1:19:37these are the events that we're going to
1:19:38be listening to. But before you say
1:19:41create, we would like to add our
1:19:43endpoint. Now you might be asking, okay,
1:19:45so we have the endpoint, we have the,
1:19:48you know, the placeholder, the input.
1:19:50What do I do? Do we just copy it from
1:19:52here and paste it to right here? What is
1:19:56this / web hook? Well, that's a good
1:19:58question. In these kind of scenarios,
1:20:00anytime you're confused, what I would
1:20:03do, I would just take the screenshot.
1:20:05Okay. So, I'm going to take this entire
1:20:06thing and go into cloud, paste this in,
1:20:10and then I'll go back. I'll take the
1:20:12screenshot from Enrog and I'll make sure
1:20:15that, you know, the URL is visible. I'm
1:20:17under the domains and I got this domain
1:20:20and I'll just paste this in and then
1:20:22I'll try to ask cloud to help me out.
1:20:24So, here I'm trying to de demonstrate
1:20:28in the case, you know, if there is
1:20:30something that I'm confused what I would
1:20:31do. I would take the screenshots and
1:20:33then I'll try to talk with Claude. So
1:20:35I'm going to shrink the left hand side
1:20:37and I'll just explain the situation.
1:20:41Okay. So hey Cloud, how are you doing? I
1:20:44have this kind of like confusion and I
1:20:46want you to help me out. So basically
1:20:49when users sign up with clerk, we are
1:20:52storing them in clerk only. I want to
1:20:55use trigger.dev with a background job.
1:20:59And you know with the web hooks I
1:21:01basically want to take the user from
1:21:03clerk and save it to my neon database.
1:21:07And for this I know that I need to
1:21:09create an API endpoint. But these
1:21:13screenshots that I have just attached
1:21:15kind of makes me confused. What do I do?
1:21:17What's going to be my endpoint looking
1:21:20like? Um just help me out. How do I fill
1:21:24in the clerk dashboard?
1:21:28So here on the endpoint URL, what do I
1:21:31paste?
1:21:32And for now, just don't really do
1:21:34anything. Just inform me and then I'll
1:21:37follow up with you, you know, just in
1:21:40case if I ask you something, I'll follow
1:21:42up.
1:21:44Okay? So this is exactly what I'm doing
1:21:46daytoday like anytime I get confused
1:21:49with a dashboard you know with a feature
1:21:52I just take the screenshot and give the
1:21:55details as much as possible like here I
1:21:58don't really say what do I put here
1:22:00right so there is a context behind it
1:22:03I'm confused because of this value as
1:22:05well so I'm going to provide that I'm
1:22:08going to provide this to AI as well
1:22:10instead of just letting it to guess what
1:22:13I'm confused
1:22:14Okay. So with you know with that said we
1:22:18will just see what Claude tells us
1:22:21probably is going to inform us like what
1:22:23you should do what you should paste so
1:22:26on and so forth and once we have that we
1:22:30will just ask cloud to set up our
1:22:32database you know create the schema um
1:22:35the tables you know I think we're going
1:22:38to have the meals table users table
1:22:40depending on the plan MD file so here I
1:22:44think we already already determined all
1:22:46the fields. As you can tell, we have the
1:22:49data model.
1:22:51Okay, so let's just wait for this to be
1:22:53completed and I'll just be right back.
1:22:55So, clutch just came up with the answer.
1:22:57Please feel free to pause the video and
1:22:59read it. It's very easy and I think it's
1:23:02explained perfectly. Uh but basically,
1:23:04it says you would like to create this
1:23:07endpoint which is going to be under the
1:23:08source app API web hooks and clerk
1:23:12API.ts file. So, we're going to create
1:23:14this in a second. And then it says
1:23:17basically go ahead put this URL into
1:23:20clerk dashboard.
1:23:22And as I said, what angrog is for is
1:23:26basically it's going to bridge the clerk
1:23:29servers to our laptop in local
1:23:32development only. So instead of you know
1:23:34[snorts] having our API running on local
1:23:36host, it's going to kind of like fake
1:23:39the situation as if it is running on
1:23:41this URL. so that we can paste this to
1:23:44clerk. So I'm going to copy it and go
1:23:46right here because if you put something
1:23:48like local host, it is not going to
1:23:51work. Okay, so here you don't really
1:23:53want to say something like local host.
1:23:55Well, absolutely not. It's not going to
1:23:56work. This is our domain and on top of
1:23:59it we have this endpoint API web hooks
1:24:02clerk. Okay, so with that now we will
1:24:05create this and this will give us a
1:24:07secret key as you can tell a signing
1:24:10secret. you would like to copy this and
1:24:13go into your env file.
1:24:16Here you can tell cloud also tells you
1:24:19like this is what you need to do. We'll
1:24:21go under the env
1:24:24let me just maximize the screen.
1:24:27This is the value and let's get the key.
1:24:31Now technically you can call this
1:24:32anything but this is the commission
1:24:34clerk web hook signing secret. So go
1:24:37ahead and save this file. Then we need
1:24:40to run this in our terminal. So we
1:24:43already have a terminal that is up and
1:24:45running for expo. We will still keep
1:24:47this open but we will create a new
1:24:49terminal. And within this we would like
1:24:52to run this command. So I'm going to
1:24:55copy it and paste it. Basically from the
1:24:58start until the end I want you to keep
1:25:01this terminal open. Both the expo and
1:25:05right here we have the anchor terminal.
1:25:07And later in the video, we are going to
1:25:09need another one for trigger.dev.
1:25:12But for now, let's just focus on only
1:25:15these two. Okay, so before we do
1:25:18anything else, I think we need to set up
1:25:20our database because, you know, we don't
1:25:23really have any tables or any kind of
1:25:25thing in our database, right? Let's go
1:25:28right here. I will visit the connect
1:25:30button and then I'll just say go under
1:25:32the env. I'll copy the snippet and then
1:25:35I'll just be right back in my env file
1:25:39and
1:25:41let me just say database URL and then
1:25:44I'm going to paste this value. Well,
1:25:46actually I'll just paste this entire
1:25:48thing and that's because I got it from,
1:25:52you know, from Neon. And here just go
1:25:56ahead and delete the quotes. We don't
1:25:58really need them.
1:26:01Okay. So here let's just talk with
1:26:03claude and explain the situation.
1:26:06All right. So in our case we already
1:26:08have the URL. We paste this into cleric
1:26:11dashboard. We have our angrog terminal
1:26:13up and running. We have our you know
1:26:17clerk web hook signing secret as the
1:26:19environment variable. And I just got my
1:26:22database URL connection string as well.
1:26:25Now before you do anything else that is
1:26:28related to web hooks. First off, I want
1:26:30you to initialize my database which is
1:26:34neon postgress. So we will be using
1:26:37drizzle as our RM and for the data
1:26:40modeling you can take a look at our plan
1:26:44MD file and just see all the details.
1:26:47Then you should give me some scripts
1:26:50that I can initialize the database, you
1:26:52know, run migrations, so on and so
1:26:55forth.
1:26:58And here I'll just you know paste the
1:27:01plan MD file as a reference. And now
1:27:05while this is trying to initialize it
1:27:07here I'd like to explain one more thing.
1:27:09So here I just said we are going to get
1:27:11all these events and we're going to do
1:27:13something different for every single one
1:27:15of them. For example when we want to
1:27:17create the user we are going to run a
1:27:19method that is going to create the user.
1:27:22But now this method could fail in the
1:27:24first time right because you know let's
1:27:26say our database is done how do we retry
1:27:29it right how do we make sure that you
1:27:31know it always works even if it fails in
1:27:34the first try even if our database is
1:27:36slow or you know even if it is down how
1:27:40do we have retries well basically that's
1:27:43why we are using triggerdev for it's
1:27:46going to handle everything for you the
1:27:49entire infrastructure is right here. All
1:27:52you need to do is basically writing five
1:27:55to 10 lines of code for every single one
1:27:58of these methods. So let's say this
1:28:00failed in the very first run. Well, it's
1:28:03going to retry it again. If it fails
1:28:05again, it could retry again and
1:28:08hopefully and eventually this function
1:28:10will run and then the user will be saved
1:28:13to database, right? And we're going to
1:28:15do the same thing for user deleted like
1:28:18we'll have a different method and for
1:28:20user updated as well.
1:28:24Okay. And we'll get into it in a couple
1:28:26of minutes. So here we go. Now database
1:28:29is live and it is verified end to end.
1:28:32So what cloud has done is creating all
1:28:35these files. Basically we have our
1:28:38schema.ts ts file which says you know
1:28:40these are the tables that we're going to
1:28:42have and these are the fields that that
1:28:44will live within that table. So that's
1:28:47for the users table and then we have the
1:28:50meals table like we're going to store
1:28:52the image URL you know the user ID that
1:28:55says you know which user owns this meal
1:28:59and then you know the status like are we
1:29:02analyzing or did we already calculate it
1:29:05so on and so forth and then we have the
1:29:07index.ts ts this is going to export the
1:29:10schema as well as the database instance
1:29:13so that we can communicate with our
1:29:15database. Then we have the result config
1:29:17file. So here it says we are using
1:29:19Postgress. Here are the files that you
1:29:22know the locations for our schema and
1:29:24then the out folder and then the casing
1:29:28as well as the database URL environment
1:29:31variable
1:29:33and then we have some scripts that we
1:29:35can run. I think Cloud has already run
1:29:38the generate. So if you go into our
1:29:40database and refresh, you're going to
1:29:42see that we have two different tables.
1:29:44For now, we don't really have any data,
1:29:46but we will create in a second. And then
1:29:50you know like here is the loop. Let's
1:29:52say you edit something within the
1:29:54schema.ts file. You would run DB
1:29:56generate and DB migrate. Okay, so that's
1:30:00the basics of database setup. Now, back
1:30:03in the old days, we would just come here
1:30:05and write everything by hand. But as you
1:30:07can tell, this is not really the thing
1:30:09anymore. And I think it's not a bad
1:30:12thing. Like you would just spend 20
1:30:14minutes by writing these by hand. And
1:30:17you know, there's like no point of doing
1:30:19that at the moment. You just explain
1:30:22everything in detail and claude or you
1:30:25know, cursor they build it for you.
1:30:28Okay. So with that said, now let's go
1:30:29ahead and talk with Claude so that we
1:30:32can basically run the trigger background
1:30:35jobs. And before we do so, I'd like to
1:30:38go ahead and visit trigger.dev and I'm
1:30:41going to say get the skills. So I'm
1:30:43going to copy this entire page.
1:30:45Basically, if you paste this to the
1:30:47terminal, you can install the skills.
1:30:49And let's actually do it. So I'm going
1:30:52to copy this. Let's go into a new
1:30:54terminal. and then I'll paste this in.
1:30:59I'll press enter and then let's see what
1:31:01we're going to get. So this is the first
1:31:03question that I got. Since I'm using
1:31:05cloud, I'm going to select this one. But
1:31:07if you're using any of the other ones,
1:31:09you know, just go ahead and press
1:31:11spacebar. But here I'll just, you know,
1:31:14select this one and then I'll press
1:31:15enter. Then for the skills, what do we
1:31:19want to install? I think I'll just go
1:31:21ahead and install everything. But you
1:31:23can see like they have even cost
1:31:25savings. They literally have a skill so
1:31:27that you don't really spend more than
1:31:29you should. That's unbelievable. I'll go
1:31:32ahead just get the getting started and
1:31:35real time and front end skills. Okay,
1:31:38basically I have everything and as you
1:31:41can tell they are all installed under
1:31:43the cloud under the skills. Um, so yeah,
1:31:46I think we are completely done with the
1:31:48skills setup. Now let's explain this to
1:31:51cloud. Okay, so we have our angrog set
1:31:55up. We have the enkrog terminal up and
1:31:58running as well. We have the database
1:32:00set up, you know, schema, so on and so
1:32:02forth. Now go ahead and take a look at
1:32:06the trigger.dev skills that we installed
1:32:10under the cloud folder and you know just
1:32:14try to implement the web hooks. So I
1:32:17want you to generate three different
1:32:19methods. We're going to have one for
1:32:22user creation, one deletion, and for the
1:32:26update.
1:32:30So I just realized in this prompt I had
1:32:33some typos like I said anchor, but looks
1:32:35like the voice detection got it kind of
1:32:38like wrong. It says anchor log. I think
1:32:41that's still fine. Cloud will be able to
1:32:43understand it. like it should know that
1:32:45I meant ankro. Um other than this there
1:32:49is no issues like here you can tell clot
1:32:51says this project has no
1:32:53trigger.config.ts
1:32:55file. So I need to set that up and this
1:32:58is a file that would be generated if you
1:33:00just copy and paste this script from the
1:33:03trigger dashboard. So here we have the
1:33:07project ID that is attached to the
1:33:09current project. And basically this
1:33:12would be you know this would be added to
1:33:14your trigger config.ts file. It is still
1:33:18fine. Cloud will do it for us. And here
1:33:20it can even check that you are logged in
1:33:24as this user. Right? So I'm logged in as
1:33:26this user and I have this project and
1:33:29this is the project ID.
1:33:32Here you can tell like it's able to get
1:33:34all the details and I think now it is
1:33:36looking at the skills that we have which
1:33:39is under the skills folder and hopefully
1:33:42it's going to implement it successfully.
1:33:45Once this is done I'll just be right
1:33:46back. All right. So after some time
1:33:48cloud is done with it and it has even
1:33:51verified it. Now let's see what files
1:33:53has been changed and you know what we
1:33:56got how that work. So first off, if you
1:33:58want to have some API routes, then you
1:34:01need to visit app.json and update this
1:34:03line. By default, this is equal to
1:34:06static. And like you have to update this
1:34:09to be equal to server and that's what
1:34:12claude has done. And once again, this is
1:34:15something that you need to do if you
1:34:17want to have your API routes or
1:34:19specifically expo API routes. Okay. So
1:34:23here we have the API folder and to be
1:34:25able to use this you need to set this to
1:34:28be equal to server. That's the first
1:34:30thing. The other thing as I mentioned we
1:34:33would need to create this file and put
1:34:35the project ID right here. As you can
1:34:38tell we have more options and if you're
1:34:40interested in detail you can take a look
1:34:42at the trigger documentation or even
1:34:44just ask it to code like explain what
1:34:47else we have right here. For example,
1:34:49here I think we have something like
1:34:52randomize.
1:34:53Maybe within here. Yeah, we have
1:34:56randomize. We have out of memory. So on
1:34:59and so forth. And then we have the clerk
1:35:02API file. And by the way, CL tells you
1:35:05like what they do. This is going to
1:35:07verify the signature just to make sure
1:35:09that the event is actually coming from
1:35:12clerk and not some random user.
1:35:16And then finally we have this file which
1:35:19contains those three different methods.
1:35:22So we have the case for user created. We
1:35:25have for user updation or update and
1:35:29finally the user deletion. Basically
1:35:32we're going to delete it from the
1:35:33database. Um so yeah right here that's
1:35:37entire file around like 60 lines of code
1:35:40and we are using the task method coming
1:35:43from trigger. Basically, you create the
1:35:46task and then attach a attach a function
1:35:49that's going to be running once that
1:35:52task needs to be done, right? Um, so
1:35:56yeah, we also have the ids. Now, if you
1:35:59go back to trigger.dev, you're going to
1:36:02see that you have all these tasks,
1:36:04right? So, we have clerk, user, created,
1:36:07deleted, and updated. Notice how they
1:36:10are matching with these ids.
1:36:13And if you press them, you're going to
1:36:15see like if you ever run them, you can
1:36:18see the details. Um I think Claude has
1:36:21already run these just to double check
1:36:24that everything is working. Here you can
1:36:26tell everything is completed
1:36:27successfully. Now what I want you to do
1:36:30is going into your clerk dashboard. So
1:36:33we will double check.
1:36:35We will delete this user and we will
1:36:37sign up from scratch. So I'm going to
1:36:39delete this user. And once we sign up
1:36:42this time it should be created both both
1:36:45here and in the database. Okay.
1:36:47Currently if I reload I don't really
1:36:49have the user in my database. Okay. So
1:36:52I'll go ahead and sign in
1:36:56or in this case I'll sign up because we
1:36:59don't have this user in clerk.
1:37:06Okay. So my account has been created.
1:37:08Let's go back. If I reload, I'll see the
1:37:12user in clerk. This was already working.
1:37:15But now if we reload here, we will see
1:37:18the user. I was going to say I think we
1:37:21didn't get this. That's because we are
1:37:23not running the trigger terminal. So
1:37:25that was my mistake. We just forgot to
1:37:28run this. So here in a separate
1:37:30terminal, let's go ahead and get this
1:37:33command.
1:37:34Um where was it?
1:37:37I think I'll just ask Claude to tell me
1:37:40that script. All right. So, I just said,
1:37:41what's the command to run trigger from
1:37:44my terminal? This is the command that I
1:37:46forgot. So, we're going to run this. And
1:37:48there is one more thing that we need to
1:37:50do. Let's just wait for this to be
1:37:53started.
1:37:55Okay. So, here you can tell it is
1:37:57running without any issues. Then there
1:37:59is one more thing like we need to get
1:38:01the trigger secret key. I'm going to
1:38:04copy this. Let's go into the env file
1:38:08and let me maximize this. We're going to
1:38:11get this value from trigger dashboard.
1:38:13So head over to API keys. You're going
1:38:16to see it under the sidebar. Just scroll
1:38:18to the bottom and copy this value. And
1:38:20if you want to update this, just press
1:38:22regenerate. And here you can tell we
1:38:24need to set this under the trigger
1:38:27secret key environment variable. Okay.
1:38:31So with that, since we have updated the
1:38:34env file, I think we might need to rerun
1:38:36our project. So I'm going to kill this.
1:38:39Let's say clear. And I'll just run MPX
1:38:41expo. And I'm going I'm going to delete
1:38:44this user once again. Now we need to
1:38:47delete this because when we sign up,
1:38:49this event will be sended. If you
1:38:51already have the user, it is not going
1:38:53to send this event, right? Because user
1:38:56already created. Okay. So with this now,
1:38:59let's go back. I'm going to reload this
1:39:01application and then we'll try to sign
1:39:03in
1:39:06and let's take a look at this terminal
1:39:08by the way like um on trigger.dev dev.
1:39:12This is running
1:39:16and user deleted has just run because we
1:39:19deleted the account. But now once we
1:39:21sign up, user created will run in a
1:39:25second here. You can tell. Now we can go
1:39:28back to clerk dashboard. We'll have the
1:39:31user right here as well as in the
1:39:33database as you can tell. So with that,
1:39:36we have just implemented this entire
1:39:38thing. And just in case if it fails in
1:39:41the first try, trigger will rerun this
1:39:45method. Right? So here we can go under
1:39:48the tasks or actually under the runs.
1:39:51You can see that we just got the user
1:39:53created
1:39:55run or the event and it is done
1:39:58successfully. All right. So with this we
1:40:00have the user synchronization working as
1:40:03expected and you have learned something
1:40:05very very important which is called web
1:40:08hooks. And from here on out, basically
1:40:10you can use this concept in any of your
1:40:13future projects. And I think it's really
1:40:15important to know how this work,
1:40:18especially in this kind of like vibe
1:40:20coding area. Okay. So with that said,
1:40:23let's go ahead and commit our changes
1:40:25and leave this section right here. And
1:40:28in the next one, we can get started with
1:40:30the actual home screen design. So we're
1:40:32going to have, you know, the homepage,
1:40:35we're going to have the camera screen
1:40:37profile. so on and so forth. For now,
1:40:39we'll just try to commit everything. You
1:40:42know, just press this button, stage
1:40:44everything, get a commit message,
1:40:50and then we can just say commit this.
1:40:56All right. So, I've just committed and
1:40:58synced them up with this. Let's leave
1:41:00this lesson right here. I'll see you in
1:41:02the next one. All right. So, this is
1:41:04where we left so far. We have
1:41:06authentication, onboarding and web
1:41:08hooks. Everything is working as
1:41:10expected. Now, we would like to build
1:41:12the home screen profile and camera. And
1:41:15for this, I got a kind of like um a
1:41:19reference UI design. I took the
1:41:21screenshot from Cali and will ask cloud
1:41:24to build something similar to this one.
1:41:27Now, if you didn't like this UI, you can
1:41:30ask chat GPT to generate a different
1:41:34variation of this one. and you know
1:41:36reiterate until you find the one that
1:41:38you liked. Then you would just paste it
1:41:40right here under the design and you can
1:41:43name it something like example home
1:41:45screen UI design.png
1:41:48or if you would like to use this image
1:41:50just go under the source code copy this
1:41:52file and paste it right here.
1:41:55Okay, so here we don't really want to
1:41:57have the progress screen or the groups
1:42:00screen. I just want to have home,
1:42:03profile, and maybe a camera screen,
1:42:06right? So, so just imagine that we're
1:42:08going to have three tabs. Now, let's go
1:42:11ahead and try to explain this to cloud.
1:42:14And before we do so, here I want to
1:42:16mention that we'd like to use expo
1:42:18native tabs. If you don't know what that
1:42:20is, basically by using the native tabs,
1:42:23we will be able to get the liquid glass
1:42:26effect out of the box. Okay, so this is
1:42:28the latest or I would say one of the
1:42:31latest features in iOS where you have
1:42:34this really really nice looking liquid
1:42:36glass effect and all you need to do is
1:42:39just using the native tabs which is
1:42:41coming from expo. So I'm going to copy
1:42:43this entire page as markdown and I would
1:42:47paste it here in a second. First let me
1:42:49try to explain to claude what we want to
1:42:52build.
1:42:55All right. So, so far in our
1:42:57application, we have everything working
1:42:59from authentication to onboarding to web
1:43:02hooks. Now, it's time to get started
1:43:04with the home screen, profile screen, as
1:43:08well as the camera screen. So, under the
1:43:11camera screen, user will be able to take
1:43:14the photo of their food. And we will get
1:43:17into it later, but for now, we would
1:43:19like to design the home screen and the
1:43:22profile screen. For the tabs, we would
1:43:25like to use Expo native tabs and I'll
1:43:29just attach the documentation from Expo.
1:43:32So, you can take a look at it as an
1:43:34example.
1:43:36Okay. So, this is my entire prompt, but
1:43:39I think I'd like to give some more
1:43:41details.
1:43:44So, for the UI design, I want you to
1:43:47keep this style as you know the same as
1:43:51we have at the moment. And here under
1:43:54the design folder I have an example UI
1:43:58image. You can take a look at it as a
1:44:00reference file. So don't try to copy it
1:44:03100% but you know make it as close as
1:44:07possible or just get inspired by it.
1:44:12Okay. So here I think I'm just going to
1:44:14attach this file so it has it as a
1:44:17reference and also and also I will
1:44:20attach the plan MD file.
1:44:23And then I'll say now when you implement
1:44:26these screens please take a look at the
1:44:29plan.md file as we have the instructions
1:44:32right there. So we have at the beginning
1:44:36we have decided all kinds of features
1:44:38under the plan MD. So if you don't know
1:44:41what to do don't guess anything. Just
1:44:43take a look at this plan file.
1:44:49Okay. and then I'll just paste the
1:44:51documentation of native tabs that I have
1:44:54just copied.
1:44:56Okay. So I think I'm just going to send
1:44:58it and I'll just wait a little bit and
1:45:01see what claude will came up with. So
1:45:03after some time this is what claude has
1:45:06came up with. I think it is looking
1:45:08pretty similar to what we have provided.
1:45:11Like it is not the exact same thing but
1:45:13it's pretty similar I would say. And
1:45:16notice how we don't really have the
1:45:18progress or groups tabs. Instead, we
1:45:21have home, scan, and profile. Now,
1:45:24profile screen definitely doesn't look
1:45:26like what I want to have. So, we're
1:45:28going to go ahead and add some
1:45:30follow-ups. But before that, here you
1:45:32can tell we need to rebuild our
1:45:35application because we are using a new
1:45:38native module. So, I'm going to go ahead
1:45:40open up my terminal. Let's Ctrl C and
1:45:43kill this. Right, with Ctrl + C, you can
1:45:46stop it and you can just say MPX expo
1:45:49run iOS. If you're on Android, you would
1:45:52just say Android.
1:45:54Okay, so I'll just wait for this to be
1:45:56rebuilt and once this is done, we can
1:45:59rerun our application and hopefully um
1:46:02you know get those SVGs working as
1:46:05expected. Now this will take some time
1:46:07to build our app and instead of just
1:46:09waiting and not doing anything, we can
1:46:11just open up a new cloud instance and
1:46:14add a new feature. So here what I want
1:46:16to do is basically when we press this
1:46:19streak button, we would like to see some
1:46:22kind of a popup that would tell users
1:46:24how many days that they have been
1:46:26tracking their calories. So here I'll go
1:46:29ahead and explain it simply to cloud.
1:46:32So under the home screen at the very top
1:46:35we have this streak button. When we
1:46:37press that nothing happens but basically
1:46:40implemented in a way that when user
1:46:42press this button we would like to see a
1:46:44pop-up that is fading like sliding in
1:46:48from the bottom of the screen. Keep the
1:46:50UI simple but you know just make it
1:46:53motivational.
1:46:56Okay. So I'll go ahead and run this. And
1:46:58by the way we have this debug button.
1:47:01Like this is something that Expo
1:47:02provides. But if you want to get rid of
1:47:04that, you can just say tools button and
1:47:07now it's not going to be visible. If you
1:47:09want to bring this back, you can press
1:47:11Ctrl D, scroll to the bottom, and you
1:47:14know, enable it. Probably this would be
1:47:17something that I should have mentioned
1:47:19earlier in the video, but better late
1:47:22than never. Okay, so I'll wait for this
1:47:24to be completed and we'll check out how
1:47:27the popup will look like. All right, so
1:47:30our application has been rebuilt as you
1:47:33can tell from the terminal and we have
1:47:35these circles working as expected. And
1:47:38when we press this button, as you can
1:47:39tell, we have a nice popup or I would
1:47:42say a sheet which is sliding in from the
1:47:45bottom. But this overlay, as you can
1:47:48tell, it is like sliding in, which
1:47:50doesn't really look nice. It should be
1:47:52fading in. So here, I'll go ahead and
1:47:54explain it this um explain it to Claude.
1:47:58All right. So, everything is working
1:48:00fine as expected. But there is one thing
1:48:03that I don't really like, which is the
1:48:05overlay. Instead of having the overlay
1:48:08sliding in, it should be kind of like
1:48:10fade in. Go ahead and implement it.
1:48:15Okay. So, once again, like this overlay,
1:48:18which is this black background, it
1:48:21should not be sliding and it looks very
1:48:23off.
1:48:25So once this has been implemented, I
1:48:27think you're going to see the
1:48:28difference. All right. So looks like
1:48:30it's done. Let's go ahead and double
1:48:32check. Here you can tell the overlay
1:48:34doesn't really slides in, but instead it
1:48:37fades in. And here is the solution. Like
1:48:40claw says, I have updated this animation
1:48:42type. And I think this looks way cleaner
1:48:45than what we had previously. But now
1:48:47there is another kind of like issue that
1:48:49we have. And the solution is simple. But
1:48:53first let me try to explain the issue.
1:48:55So this user has signed in right. We
1:48:58have this user both in clerk and in our
1:49:00database. But I think this data is
1:49:03hardcoded because we never used open AAI
1:49:07to generate these values. And if you
1:49:09take a look at the database under the
1:49:12user table, you're going to see that all
1:49:14the values are actually empty.
1:49:17Let me just maximize the screen. And by
1:49:20saying all the values I mean like the
1:49:23you know the gender, date of birth,
1:49:25height, weight, so on and so forth,
1:49:28right? These values should be coming
1:49:31from onboarding. So we'll go ahead and
1:49:33explain this to cloud and kind of like
1:49:35wire this up. And before we try to go
1:49:38into cloud, let's go ahead and get the
1:49:41API key from OpenAI. Now I'm going to be
1:49:44using OpenAI, but you can really use
1:49:46anything that you wish. That could be I
1:49:48think Gemini or really anything. It
1:49:51could be Antrophic but I already have
1:49:54some credits in OpenAI. I think I have
1:49:58you know added around like $20 but you
1:50:00can definitely add less than this. Um
1:50:03like $5 should be enough or I think if
1:50:05you use Google or Gemini that would be
1:50:09completely free to get started with.
1:50:11Okay. So I'll be showing you the Open AI
1:50:14way of doing it. But if you want to use
1:50:16Gemini, just ask it to cloud and it'll
1:50:19walk you through it. It'll be very very
1:50:21similar. So you would basically create a
1:50:24new secret key. In this case, I'm just
1:50:26going to say cali tutorial
1:50:30and then I'll say create this secret
1:50:32key. Now here you need to copy it and
1:50:35paste it into yourv file. Now don't try
1:50:39to use mine because I'll be deleting it
1:50:42before publishing this video. So here
1:50:44I'll just say open AI let's say API
1:50:49key and then I'll paste my value.
1:50:54Now let's go into cloud and try to
1:50:56explain what we would like to do.
1:51:00Okay. So so far our application is
1:51:03mostly working as expected. But there is
1:51:05one issue which is about the onboarding
1:51:09and the data that we generate for this
1:51:11user. So how many calories left protein
1:51:15carbs and fat I think these are
1:51:17hardcoded you need to generate these
1:51:21values
1:51:22uh using open AAI basically send the
1:51:26information of the user when they sign
1:51:28up or when they went through the
1:51:30onboarding process you need to take
1:51:33these values send them to openai and
1:51:36whatever openai returns you need to save
1:51:39it to database and then also display it
1:51:41on the UI.
1:51:45Okay, so this is the first part of the
1:51:47implementation. The other part is let's
1:51:50try to sign out. The other part is you
1:51:54know what happens if user just signs in
1:51:57without going through the onboarding
1:51:59process, right?
1:52:02We still want to show them the
1:52:04onboarding screen. So once they sign in,
1:52:06just imagine like they're signing up
1:52:08right here and instead of showing them
1:52:11the home screen, we'd like to show them
1:52:13the onboarding process. So basically, no
1:52:16matter what happens, they have to go
1:52:18through the onboarding process. So I
1:52:20have accidentally sent this prompt. So I
1:52:23just paused it. I'm going to copy it and
1:52:25paste it right here. And then I'll
1:52:26explain what I have just said.
1:52:29And in the case of user signing up
1:52:33without going through the onboarding
1:52:35process, when they log in, you should
1:52:37still show them the onboarding process.
1:52:40Like no matter what happens, the user
1:52:43should go through the onboarding
1:52:46process. like they have to provide these
1:52:48values like their gender, height, you
1:52:51know, all kinds of questions that we
1:52:53have in the onboarding so that we can
1:52:55generate,
1:52:57you know, their um macros, calories, so
1:53:01on and so forth. Okay, go ahead and
1:53:04implement this
1:53:06and I believe CL should be able to do
1:53:09it. If not, we can always follow up. So
1:53:13the tasks that we have given to cloud is
1:53:16pretty simple. So I'll just wait once
1:53:18this is done. I'll just be right back.
1:53:20Now while this is getting built, we can
1:53:22go into clerk dashboard and just delete
1:53:25this user because we are going to go
1:53:27through this entire process from
1:53:29scratch. So I have just deleted the user
1:53:32and from the trigger.dev dev under the
1:53:34runs we can see that clerk user deleted
1:53:37method or the task run and you know it
1:53:40is done in 3 seconds successfully we
1:53:44don't really have any issues and under
1:53:46the database under the users as you can
1:53:49tell that user is gone all right so
1:53:52after some time cloud was able to
1:53:54implement it and we'll go ahead and test
1:53:57this out manually basically the main
1:53:59logic is under the generate plan file
1:54:02and you and take a look at the entire
1:54:04path like the entire workflow how
1:54:07everything happens step by step. Just
1:54:09pause the video and read it. I'll just
1:54:11show you the main logic and what we are
1:54:14doing under the hood. Okay, so we have
1:54:17the OpenAI SDK as usual. We are using
1:54:20the task from trigger because that's the
1:54:24infrastructure that we'll be using for
1:54:26our AI agents. Then we are using the GPT
1:54:295.6 six Luna model which is fast. Um and
1:54:34then we just say you know you're a
1:54:37registered dietician and you're building
1:54:39a daily nutrition plan for one person.
1:54:42Here are the rules. You know here is our
1:54:45schema. Then we have the task that we
1:54:47would like to run here. You can tell.
1:54:51Okay. So with this in mind we can go
1:54:54ahead and give it a go. I'll go ahead
1:54:56and just say get started and follow
1:54:59along with the onboarding. I'll just
1:55:01leave everything as default. Let's say I
1:55:04want to gain weight.
1:55:07Let's just say something like 65 or
1:55:10sorry 75.
1:55:12And here let's say very active.
1:55:16Let's go a bit aggressive. And just
1:55:18before we say next, make sure that
1:55:21you're running all these terminals. So
1:55:23you have the expo app running. you have
1:55:26enkrock running as well as the trigger
1:55:30um trigger terminal right and you can
1:55:32run it with this command okay so I have
1:55:35already run them off camera like I test
1:55:38this out but we will rerun it again so
1:55:41I'm going to say classic next and now
1:55:44this is going to build our plan now here
1:55:46you can tell we just got a new run we
1:55:48can go into the dashboard let's just see
1:55:51under the runs here you can tell in real
1:55:54time it tells tell us that
1:55:56like it's been executed. And here we go.
1:55:59It is like it did not fail. It is done
1:56:03successfully. And here you can take a
1:56:05look at the payload output. How long it
1:56:08took, you know, every single detail.
1:56:11I'll just leave it for you to explore
1:56:13the dashboard in detail. Okay. So with
1:56:16this, we got the UI. There are some
1:56:18issues and I'm just going to take the
1:56:20screenshot. So we'll ask it to cloud to
1:56:23kind of like fix it. But this is only UI
1:56:26related, no functionality. So I'm just
1:56:29going to say continue.
1:56:32And actually before we say continue,
1:56:34let's just keep this in mind. We have
1:56:364,100
1:56:37calories per day. So just keep this in
1:56:41mind and we'll just double check if this
1:56:43will be saved to database. And here we
1:56:45have the other values. Okay. So I'll
1:56:48just say continue. Let's say continue
1:56:50with Google.
1:56:52So once our account is created, it
1:56:55should save all this data to our
1:56:57database.
1:56:58So notice how the cleric user created
1:57:02will run in a second. I was going to
1:57:04say, but looks like something has
1:57:06failed.
1:57:08What is this?
1:57:10Okay, so we're going to get into this. I
1:57:12think it is only development error
1:57:14because this has worked out and it says
1:57:17success. So, I'm just going to reload
1:57:19this. Ctrl D and reload.
1:57:27Let's wait for this to be loaded.
1:57:32Okay, so definitely something is wrong.
1:57:35We'll get into it. Let's take a look at
1:57:37it here. Everything
1:57:40looks like working. Okay, so turns out
1:57:43I'm missing the clerk secret key. and we
1:57:45can grab this.
1:57:48So, first off, I'm going to visit
1:57:51um I'm going to visit the env file and
1:57:54then we're going to have the clerk
1:57:56secret key. But wait, I already have
1:57:58this. It says clerk secret key to your
1:58:05Okay, that's interesting. Maybe this is
1:58:07not really matching with our actual
1:58:10project. So I'm going to go into clerk.
1:58:14Let's say quick start
1:58:16for Node.js
1:58:21or for the express. Let's scroll to the
1:58:24bottom. Cali tutorial. And I'm just
1:58:26going to copy everything from here.
1:58:28Paste it right here at the bottom.
1:58:33Okay. So it's actually the correct
1:58:35value. Well, I don't know why this did
1:58:38not work. Maybe we need to rerun our
1:58:40application.
1:58:42So, I'm going to kill this and I'm going
1:58:44to say clear MPX expo and let's just
1:58:48start it.
1:58:51I'm going to press R to reload our app
1:58:54or let's press I.
1:58:57It's going to rerun it.
1:59:03Okay. So I think the onboarding process
1:59:05didn't really worked out initially
1:59:07because we were missing the environment
1:59:09variable which is completely fine. Let's
1:59:11just double check if we have this user.
1:59:14Yeah, we have it. But as you can tell
1:59:16the values are not really here. So let's
1:59:19go through it once again. So this is
1:59:21real world programming. You of course
1:59:24you know you always get these type of
1:59:26errors or issues but yeah you just need
1:59:30to learn how to fix them. So we just
1:59:32realized within the terminal we are
1:59:34missing a value. We just provided that.
1:59:36Rerun our application and now everything
1:59:39should work out. Let's say gain weight.
1:59:41We'll go with 75.
1:59:51Okay. So notice how this will rerun
1:59:54again. Generate plan. You can go into
1:59:56the dashboard under the runs executing.
2:00:00You can press it like once this is done.
2:00:04I think it says completed already.
2:00:07Okay. So keep this value in mind 3740.
2:00:11I'll say continue.
2:00:13And this value should be saved to our
2:00:15database. Let's go here. Reload. Here
2:00:19you can tell we got every single thing.
2:00:21Um 37 40 and the other values are also
2:00:26correct. So that means everything is
2:00:28working now as expected. We got rid of
2:00:31that issue that we're trying to fix. And
2:00:34currently I am in Indonesia and that
2:00:37means the time zone is also correct.
2:00:39Like it says Asia Makasar or I don't
2:00:42know how you pronounce it but this is
2:00:44also correct. All right. So let's go
2:00:47back to VS Code. There is one thing that
2:00:49I'd like to follow up with Claude. So if
2:00:53you remember I took a screenshot. So
2:00:55I'll just go ahead and get it from my
2:00:57clipboard history. So, it was this
2:01:00screenshot, right? The UI doesn't really
2:01:02look nice. I'm going to say go ahead and
2:01:04fix this.
2:01:06So, everything is working as expected,
2:01:08but the attached UI is kind of broken. I
2:01:12want you to add the proper spacing
2:01:15between the continue button and then
2:01:18this purple container. And, you know,
2:01:22make sure that this page is scrollable.
2:01:24So, we see the continue button at the
2:01:27bottom. You know, just overall go ahead
2:01:29and make this UI look clean.
2:01:35All right. So, looks like Cloud has
2:01:36fixed it. To be able to test this out, I
2:01:39think I need to log out and go through
2:01:41the onboarding process just to be able
2:01:43to see the screen, which is something
2:01:45that I'm not going to be doing at the
2:01:46moment. I'll just trust Cloud for now.
2:01:49And maybe by the end of this tutorial we
2:01:52can check out the UI of this screen.
2:01:55Okay. So with that said now we can get
2:01:57into the scan screen and basically here
2:02:01we will ask for the permission so that
2:02:03we can access to the camera of the user
2:02:06and to be able to implement this you
2:02:08need to update the app.json file. Now of
2:02:12course we don't really need to do it
2:02:13manually. Let me find this file. will
2:02:16just ask cloud to you know ask for the
2:02:19permission from users. If you don't add
2:02:22the permission it is not going to work.
2:02:25Um okay so basically when they visit
2:02:28this screen camera will open and then
2:02:30they will scan the meal. So let's go and
2:02:33open up a new chat and then explain
2:02:36everything to cloud and then I'm going
2:02:38to explain how everything will work step
2:02:40by step. And actually before we start
2:02:42talking with cloud let me show you the
2:02:44workflow that we're going to have. So
2:02:46when user take a photo of their meal our
2:02:48API rod will run where we would like to
2:02:51upload the image to image kit. Then we
2:02:54would like to save the meal to our
2:02:56postgress database with the pending
2:02:58state because we are just starting to
2:03:00analyze the meal and get the macros
2:03:04right like the calories protein so on
2:03:06and so forth. And then the most
2:03:08important part is the trigger.dev task.
2:03:12This will run and here is where we'll
2:03:15have our AI agents. So we'll say hey
2:03:18OpenAI please take this photo and
2:03:21analyze it. And once it is done it's
2:03:23going to give us some response back.
2:03:25Then we will update our database with
2:03:27the you know calories, macros etc. Then
2:03:31we can update the state in real time as
2:03:33well. So user will see what is going on
2:03:36what are we doing in the background and
2:03:38then once everything is done uh once we
2:03:41got the result our UI will be updated in
2:03:43real time as well. Okay, now before we
2:03:46implement anything, let's go into image
2:03:48kit, visit our dashboard under the
2:03:51developer options. Let's get some of
2:03:54these values. So, I'm going to get my
2:03:56image kit public key. Go under the
2:03:59envit_key.
2:04:04And I'm going to have the same thing for
2:04:07secret key. Let's say image kit
2:04:11secret key.
2:04:14And then I'm going to copy this value.
2:04:21And then I think we can also get the URL
2:04:24endpoint. So I'm going to copy it. And
2:04:27then I'll say image kit
2:04:30URL endpoint.
2:04:34Okay. Now with this in mind I think we
2:04:36are ready to get started with um one
2:04:40more thing you can always visit image
2:04:43kit documentation for any kind of
2:04:45feature that you want to implement on
2:04:47top of what we are going to be building.
2:04:49Let's say you want to have some videos
2:04:51and you would like to resize them,
2:04:54right? You would just come here and you
2:04:56can take a look at the features. But to
2:04:58be able to implement this, all you need
2:05:00to do is copying this entire file or the
2:05:03entire instructions to your LLM. Like
2:05:06this is such a nice addition. Just copy
2:05:09it, paste it, and then talk with cloud
2:05:11or cursor whatever you are using. Okay.
2:05:14So with this in mind, I'll try to
2:05:16explain this workflow to claude and then
2:05:19we'll just try to kind of like test this
2:05:22out and see how everything will work.
2:05:27Okay. So so far in my application
2:05:29everything is working. I'm happy with
2:05:31what you have generated so far. Now I
2:05:34want you to build the scan screen. First
2:05:37off, when user visits this page, we
2:05:40would like to ask them for permission
2:05:42that we can access to their camera. Once
2:05:45they give the permission, we would like
2:05:47to, you know, allow them to take a photo
2:05:50of their meal and, you know, see some
2:05:53kind of button that says analyze the
2:05:56food. Once they press that button, we
2:05:58would like to do a couple of different
2:06:00things. So, we would like to save the
2:06:02image to image kit. We would like to
2:06:05save the meal to our database with the
2:06:08pending state and we would like to kind
2:06:11of like run the trigger task where we
2:06:14will send this image to open AAI analyze
2:06:18it and get the result. Now while doing
2:06:21this we can use the real time feature of
2:06:24trigger and for this I can provide you
2:06:27the documentation or actually you can
2:06:31take a look at the trigger skills that
2:06:34we have under the cloud folder.
2:06:39Okay. So I think this is my prompt. I
2:06:41try to explain everything in detail. Um
2:06:45we can say yeah I think I'll just send
2:06:47this and see what we're going to get.
2:06:51in the you know off camera I have
2:06:53already tried this like last week when I
2:06:56was building the demo application and
2:06:58cloud was able to give me exactly what I
2:07:01wanted to have but you know this is AI
2:07:03you cannot really trust it 100% of the
2:07:06time so whatever we got we'll just try
2:07:08to um we'll try to test this out
2:07:11manually no matter what happens so I'll
2:07:14just wait for this to be completed once
2:07:16this is done I'll just be right back all
2:07:18right so after some time This has been
2:07:20implemented and we are going to go ahead
2:07:22and test this out. Before we jump into
2:07:24testing, here are a couple of different
2:07:27files that Cloud has generated. And
2:07:30let's pretty quickly try to go over
2:07:32them. And before we do so, you need to
2:07:34kill your terminal. Okay, so right here,
2:07:37kill your Expo terminal, then run MPXO
2:07:41pre-built. Then you would like to run
2:07:44you know MPX expose start with the clear
2:07:48flag with that it should be working out.
2:07:50If you get any kind of issues or
2:07:52problems just take the screenshot and
2:07:55paste it to cloud. Um you know it should
2:07:57be able to fix that. Other than this
2:08:00like we got the camera file in here we
2:08:03are using the expo camera which is a
2:08:05native module and with this we are
2:08:08getting the hook called use camera
2:08:11permission and basically when you want
2:08:14to take a photo before you do so we will
2:08:17run this method which is called as
2:08:19request permission right and then if you
2:08:22visit the app.json JSON within this file
2:08:26you're going to see that let me just
2:08:28scroll to the bottom under the plugins
2:08:31under the Xbox camera we have the camera
2:08:34permission. So here you would just put
2:08:36your name name of your application and
2:08:39then you will say something like this
2:08:41app uses the camera to read the calories
2:08:44and macros in your meal and this will
2:08:46ask a question to the user where you
2:08:49know if they want to give access to the
2:08:51camera and it is the same idea if you
2:08:54want to you know access
2:08:56to the library of the user right so if
2:09:00you have I mean you probably use bunch
2:09:03of different apps in real world and you
2:09:05know they always ask you know let's say
2:09:07Instagram wants to access your photos
2:09:10and it's going to be this place where
2:09:12you will ask that question as the
2:09:14developer
2:09:16okay so that's the file for UI and the
2:09:20permission then we have the backend code
2:09:22which is under the mills API so this is
2:09:26going to be under the source API
2:09:28actually source app API and then we have
2:09:32the mills API I end point. Now we can
2:09:36jump into source code and take a look at
2:09:39it what is going on in detail. But
2:09:41basically this is going to handle the
2:09:43image kit upload. You know it's going to
2:09:45create the analyzing row trigger to run
2:09:48and then it's going to return the
2:09:50handles on uh public access token and
2:09:53then we have the analyze meal which is
2:09:55going to run the actual task in trigger.
2:09:59So we give the prompt just like
2:10:01previously you know we say you're a
2:10:03nutritionist estimating what is on a
2:10:05plate from a single photo and then we
2:10:08just run the task. So super simple
2:10:11JavaScript or TypeScript I would say we
2:10:14are manipulating or we are you know
2:10:17updating the database. Okay. So with
2:10:20this let's go ahead and test this out.
2:10:22I'll just say allow camera here. You can
2:10:24tell we got the request for the
2:10:27permission. I'll say allow. Now, since
2:10:29this is a simulator, we cannot really
2:10:31use the camera. Like you cannot really
2:10:33see
2:10:35um anything even like you cannot use
2:10:37your laptop camera. But when we test
2:10:40this out in in our phone, uh the camera
2:10:42will work. So, I'm going to just press
2:10:44this button here. You can tell we got
2:10:46the analyze the food. I'll just say
2:10:49retake. What happens when we press this?
2:10:52Well, nothing happens, but we can
2:10:53integrate that. Or actually it is
2:10:55working but it is kind of like slow or
2:10:58buggy I would say.
2:11:01Yeah, there is definitely some delay.
2:11:05I'll just try to reload this
2:11:07application. Okay, so I'll take the
2:11:09photo and let's say analyze the foot.
2:11:11Before we do so, I think I'll visit my
2:11:14trigger dashboard. And here you can tell
2:11:17we have the task. It is right here. Um,
2:11:21I think we might need to add the
2:11:23environment variable of our database.
2:11:27So, let's just check if cloud has say
2:11:30something like this. Yeah, here it says
2:11:32you need to get the database URL
2:11:36and our environment is going to be
2:11:38development. Let's get the value from
2:11:40the env file.
2:11:43So, just copy this entire thing and
2:11:45paste it right here.
2:11:49And you need to make sure that you're
2:11:51running your terminals
2:11:54like this is the trigger terminal and
2:11:57you are running the expo application as
2:11:59well. So with this I think I'll just
2:12:01take a look at my terminal and say
2:12:03analyze the food. Um looks like it says
2:12:06connect could not connect to the server.
2:12:10Maybe we might need to reload our
2:12:12application or maybe rerun this
2:12:14terminal.
2:12:16So I have just rerun the application and
2:12:18I'll try to test this out. Let's say
2:12:21analyze the food. Hopefully something
2:12:23should run on trigger.dev
2:12:26if we have implemented this correctly.
2:12:32All right. So it took some time but here
2:12:34we go. Now it started running and I
2:12:36believe that this should be running in
2:12:38real time.
2:12:40Okay. So here we go. We got the error
2:12:42which is true. It says that doesn't look
2:12:45like food. And let's take a look at the
2:12:48trigger. Under the tasks,
2:12:51sorry, under the runs, we just got the
2:12:55uh latest one, which is analyze meal.
2:12:59Okay, so we even got the kind of like
2:13:02the info message, right? It says this
2:13:05photo is not food. And you know anytime
2:13:07you got some errors you can just jump
2:13:09here and try to debug it and just see
2:13:12what is going on. Now I'll just actually
2:13:15copy this and I'd like to see this where
2:13:18this is in my code. I believe it is
2:13:20under that file called analyze meal
2:13:22here. You can tell we are using the
2:13:24logger. Um and I think this is very very
2:13:27important to use with trigger because if
2:13:30if something fails just like here and if
2:13:32you are not using the logger you will
2:13:34not be able to see what is going on.
2:13:36Okay. Now with that said maybe we can do
2:13:39something else like we cannot take the
2:13:42photo of our food. What we can do is
2:13:44allowing the access to the photo gallery
2:13:48and then you know if we have some meal
2:13:51food just like this we can provide it to
2:13:54our application. So here I'll go into
2:13:57clot and I'll just say simply implement
2:13:59this.
2:14:01So under the scan screen I want you to
2:14:04add a button for gallery access. And
2:14:08with this gallery access, we should be
2:14:10able to select food images from our
2:14:14gallery and you know provided to our
2:14:18application. So it doesn't have to be
2:14:20only taking the photo from from camera.
2:14:26All right. So looks like this has been
2:14:28implemented and for this there is a
2:14:30package called expo image picker which
2:14:32is going to basically allow us to access
2:14:35to the you know gallery of the device
2:14:39and again to be able to implement this
2:14:41you need to have the permission under
2:14:43the app.json just like in Xbox camera
2:14:47here you would like to have the same
2:14:48thing for the image picker package. All
2:14:52right so with this let's go ahead and
2:14:53give it a try. I think I will reload my
2:14:56application.
2:15:03So, we are authenticated. This will take
2:15:05us to the home screen. From here, let's
2:15:07say scan a mail. Here we go. We have the
2:15:10button. Once we press that, we're going
2:15:12to get the permission. Now, in this
2:15:14simulator, I have already give the
2:15:16access. So, it doesn't really ask me
2:15:18again. But if you're using it for the
2:15:20first time, it's going to ask you to
2:15:22give the permission. Once you allow it,
2:15:25you can choose the food. I think here
2:15:28I'll just say analyze the food and
2:15:31I'll take a look at the terminal. This
2:15:33should run.
2:15:35I don't know if the you know the
2:15:38connection was lost. Maybe I need to
2:15:40rerun this here. I'll just say analyze
2:15:43the food. So here we go in real time. It
2:15:46gives us feedback.
2:15:48We are analyzing the food. And here you
2:15:50can tell as soon as it is executed, as
2:15:53soon as it is completed, we can get the
2:15:55values. So this is sliced chicken breast
2:15:59which is around 750 calories. And here
2:16:02are the macros. Now we can go into
2:16:05trigger.dev under the runs. We should be
2:16:07able to see it.
2:16:10Like here we can tell here's the
2:16:12payload, here's the output. And that's
2:16:15exactly what we see in the UI. Now, off
2:16:18camera, I have asked Claude to implement
2:16:21this in a way that the first scan is
2:16:24going to fail because I want to show you
2:16:26that what happens in real world when it
2:16:29fails for the first time. Well, the
2:16:31trigger.dev will run a retry, right? And
2:16:34let's try to actually give it a go. So,
2:16:37here I'm going to say scan another one.
2:16:39And this time, let's select this one. As
2:16:43soon as we say analyze the foot, it's
2:16:46going to start running.
2:16:49Let's see. I'll just refresh.
2:16:54Okay. So, like we cannot still see it
2:16:56here is because the image I think is
2:16:58getting passed to image kit. But once it
2:17:01is done, we should have the run. Now, it
2:17:04is executing. And for the first time, I
2:17:07believe it's going to fail.
2:17:10So, attempt one. As you can tell, it has
2:17:12failed. Now it is running again. So we
2:17:14have a retry and this is exactly what's
2:17:17going to happen in real world. You
2:17:19cannot really expect this to run
2:17:21successfully every single time. So this
2:17:24is the proof that we actually have the
2:17:26infrastructure that is already built for
2:17:28us which is going to retry it without
2:17:31you doing anything really. Okay. So with
2:17:34that said now I'll just say okay I
2:17:37tested this out. bring it back to the
2:17:42previous version without failing.
2:17:49Now I'll just say done. Let's check if
2:17:52we're going to have anything in the
2:17:53database or if we already have. So under
2:17:57the meals table, as you can tell, we
2:18:00have like one of them has failed, the
2:18:02other ones are completed.
2:18:06And we can see that we have every single
2:18:08value. Now I think we need to reload our
2:18:12application to be able to see it. Here
2:18:15I'll go ahead and reload this.
2:18:19And in the homepage it should fetch
2:18:22these meals. I was going to say but
2:18:25looks like this is not this has not been
2:18:27implemented. So let's go ahead and ask
2:18:29cloud to you know write a query. It's
2:18:32going to be super simple. We are just
2:18:34going to fetch this data from the
2:18:36database and display it right here. And
2:18:38now just before we ask cloud to
2:18:40implement it, there is something that I
2:18:42want to talk about which is about the
2:18:44image optimizations. So here let's think
2:18:46about that when we take the photo of the
2:18:49image, it is a large photo, right? It's
2:18:51a large image. But when we try to
2:18:54display it right here, we don't really
2:18:56need a huge size, right? So we can
2:18:59resize it which is going to be better
2:19:01for the network access or you know like
2:19:06we are going to transfer less data. So
2:19:09here let's think about that that was the
2:19:11original image. This is stored in image
2:19:13kit but what we can do we can just ask
2:19:16for image kit to deliver this in a
2:19:19smaller size because that's what we're
2:19:22going to see right here. Okay. So with
2:19:24this in mind, we can just ask Claude to
2:19:27use the image kit optimizations. So
2:19:30here's my prompt. You can pause the
2:19:32video and read it. Now at the very end,
2:19:34I'm going to say use context 7. If you
2:19:37don't know what this is, basically this
2:19:39is going to check the latest
2:19:41documentation of image kit. And this is
2:19:44one of those tools that you have to
2:19:46have. And all you need to do to set this
2:19:49up is just opening up a new instance and
2:19:52just ask cloud to you know install it
2:19:55for you for your machine. So just go
2:19:58here and say can you please install
2:20:01contact 7 in my machine. So I want to
2:20:04have it for every single project
2:20:07and then you will just send it. That
2:20:10would set that up. I already have it.
2:20:12Now, this is a like this is one of these
2:20:15tools that you have to know. So, I'll
2:20:17just show you that pretty quickly. Okay.
2:20:19So, here you can tell we have the
2:20:20documentation for every single thing.
2:20:23Basically, let's just search for image
2:20:25kit.
2:20:26Here you can tell we have everything up
2:20:29to date and our AI tool will be able to
2:20:32check this out and get the latest
2:20:34information. Okay, so with that said,
2:20:37let's send it and see what we're going
2:20:39to get back. So, here we go. This has
2:20:42been implemented. We are able to see the
2:20:44scans that we already had. Now there is
2:20:47one thing that I don't really like which
2:20:49is the not food option. So if you know
2:20:53if we have something that is not food
2:20:55just like in this case then we don't
2:20:57really want to see it in today's meals
2:21:00and there's also like not extra space. I
2:21:03need to fix that. So let's try to
2:21:05explain this. So, under the today's
2:21:08meals section, when we have something
2:21:10that is not food, just don't display it
2:21:14in that section or even like maybe don't
2:21:16store it in the database. So, we don't
2:21:18really get it under this section. Also,
2:21:21just give some extra spacing or extra
2:21:24padding from the bottom so the native
2:21:27tabs are not really overlapping with
2:21:30these meals.
2:21:33All right. So this has also been
2:21:34implemented. As you can tell, we have
2:21:36extra space and the not food options are
2:21:40gone. So with this, I think I'm going to
2:21:42leave this section right here. In the
2:21:44incoming sections, we can add more
2:21:46optimizations and you know, we can test
2:21:48this out more just to see what we are
2:21:51missing and what what else we can add on
2:21:54top of it. Then I think in the incoming
2:21:56sections, we can also get into the
2:21:58profile screen. So for now, I think I'm
2:22:00going to maximize the screen. Let's
2:22:03close everything
2:22:06and then I'm going to stage everything
2:22:08that we have so far.
2:22:12Wait, I think they're already staged.
2:22:14Um,
2:22:16I'm going to stage these as well.
2:22:20And let's get a commit message. Then
2:22:22we're going to commit then sync this up.
2:22:30All right. So with this hopefully I'll
2:22:32see you in the next lesson.
2:22:34All right. So this is where we left. Now
2:22:36before we get started with the profile
2:22:38screen, there is a problem that we need
2:22:40to talk about and thankfully there is a
2:22:42solution that we can implement. Now the
2:22:45problem here is that even if you like it
2:22:47or don't like it, your users will get
2:22:50some errors. You might be thinking that
2:22:52I have implemented everything in the
2:22:54best way possible, they are not going to
2:22:56get errors. Well, unfortunately this is
2:22:58not how they work. This is real world
2:23:01programming and a real mobile
2:23:03application. So, they're going to get
2:23:05some errors, which is fine. But what you
2:23:08would like to do as the solution here is
2:23:11setting up a tool that will always watch
2:23:14your users, right? Watch your
2:23:16application. And anytime they get an
2:23:19error, you'll be notified in real time.
2:23:21And this real-time notification could be
2:23:24via Slack, Gmail, or anything that you
2:23:27would like to set up. Now the tool that
2:23:29we're going to be using here is of
2:23:31course going to be sentry and here is
2:23:33kind of like the diagram that I have
2:23:36provided and you know I just want to
2:23:38walk you through it. Okay. So again what
2:23:40happens when your users face some
2:23:43errors? Well they will definitely not
2:23:45send you an email. They'll just delete
2:23:48the application leave a one-star review
2:23:51probably with a very bad comment. And
2:23:55you know when they got some errors, if
2:23:56you're not using Sentry, you have no
2:23:58idea what broke for whom or why. But if
2:24:03you have Sentry set it up, which is
2:24:05going to, you know, watch your
2:24:06application. This is literally kind of
2:24:08like a watch tower. And then it's going
2:24:11to catch the errors. It's going to show
2:24:13you the session replays, which means
2:24:15basically it's going to record the
2:24:17screen when the error happens, right? So
2:24:20that you can see how your users are
2:24:22using the app and you know like what
2:24:26time error happens when they press this
2:24:28button or that one or that one so on and
2:24:31so forth and then you can get the
2:24:33performance tracking as well. There are
2:24:35like traces and bottlenecks you can set
2:24:38up structured logs which is something
2:24:40that will be done and as I said you'll
2:24:42get realtime alerts. So, this is
2:24:45definitely something that you'd like to
2:24:47set up no matter what happens because
2:24:49otherwise there is no way for you to
2:24:51know if your users are getting errors or
2:24:54not. You will just learn it the hard way
2:24:56from the reviews. Now, with that said,
2:24:59there is something else that I want to
2:25:00talk about. Instead of using only
2:25:02console logs, we have sentry logs. Here,
2:25:05I put kind of like a comparison. You can
2:25:08pause the video and read it and I'll
2:25:10just try to walk you through it pretty
2:25:11quickly. So, console.log log is super
2:25:14simple. It just lives on the user's
2:25:16device. It's going to disappear when the
2:25:19application closes, right? But Sentry
2:25:21logs are persistent and searchable and
2:25:24they send to Sentry's servers. So from
2:25:27the Sentry dashboard, you'll be able to
2:25:29actually see the logs and this is
2:25:31something that we'll get into a bit
2:25:34later in the video. And then you know
2:25:36this is plain text, but this is
2:25:38structured. You can literally query it
2:25:41with any kind of tag. Then this has no
2:25:43connection to errors but this is linked
2:25:46to traces errors and session replace. So
2:25:49instead of guessing you will literally
2:25:50just see what is going on from the
2:25:52sentry locks.
2:25:55And here I have kind of like a real
2:25:57world scenario. This is something that I
2:25:59use in almost every single one of my
2:26:01tutorial because it explains the
2:26:04situation. So just think you know like
2:26:07imagine you have 50,000 users and you
2:26:10have an e-commerce application and let's
2:26:13say you're getting around like 500
2:26:15checkouts a day and some of them will
2:26:17fail even if you like it or don't like
2:26:19it. Some of them will fail. That could
2:26:22be you know because of your Stripe setup
2:26:25is incorrect or I don't know your users
2:26:28don't really have enough credits in
2:26:30their card so on and so forth. So if you
2:26:32use sentry logs you can just go ahead
2:26:34and add all these type of queries you
2:26:37know you can just search for the users
2:26:39in LA in the last 24 hours but with
2:26:42console log unfortunately this is not
2:26:45possible all right so I hope this gives
2:26:47you kind of like an overview of sentry
2:26:49it is much more than this they actually
2:26:52have a code reviewing tool called seir
2:26:55and we'll get into that in a couple of
2:26:57minutes as well and just to mention like
2:27:00some of the best companies companies out
2:27:02there. The biggest ones are using
2:27:04Sentry. So, it's definitely something
2:27:06that you would like to learn both for
2:27:08your job and, you know, for your own
2:27:10projects if you would like to deploy an
2:27:13app to the App Store. Okay, so with that
2:27:16said, let's go into Sentry. I think we
2:27:18already signed up early in the video.
2:27:21Now, let's go ahead and create a new
2:27:23project. Let me just see where I can
2:27:26create it. So I already have bunch of
2:27:28different projects, but if you're using
2:27:30it for the first time in the dashboard,
2:27:32you will probably see a button that says
2:27:34create project. So I'm going to go ahead
2:27:37and press this. We would like to uh we'd
2:27:40like to select React Native as our
2:27:42platform. Then here you can customize
2:27:44the alert frequency. Like there are a
2:27:46bunch of different options. I'll just
2:27:48leave everything on default. Let's give
2:27:50it a name for the project slug. I'll
2:27:52just say Kell AI
2:27:55tutorial maybe like this.
2:27:59This is my team. If you have, you know,
2:28:01if you're working with a team, you can
2:28:03add your own team, so on and so forth.
2:28:05But in this case, I'll just leave it as
2:28:06it is. And then you can set this up in
2:28:09Slack, Discord, and Microsoft Teams. Um,
2:28:13I don't know who used that, but that's
2:28:15fine. By default, it is already
2:28:18integrated with Gmail. So anytime
2:28:21something fails you will get an email
2:28:23from from Sentry. Okay. Now I'll just
2:28:27say create the project. There is
2:28:29something called Sentry wizard which is
2:28:31like the CLI tool that they have. All
2:28:34you need to do is copying this and
2:28:37pasting it to the terminal. And I think
2:28:40like you can copy the instructions as
2:28:42well for your LLM.
2:28:44Um yeah actually this is what I'll be
2:28:47doing. I'll just copy it and I'll just
2:28:49ask cloud to implement it for me because
2:28:52that's why they put this option, right?
2:28:55So, I'm going to go ahead paste this in
2:28:57and at the very top, let me just add my
2:28:59prompt. So, this is the entire
2:29:02instructions or kind of like the
2:29:04documentation I got from Sentry. Go
2:29:07ahead, follow it and set this up in this
2:29:10project.
2:29:13Now once this is set it up, we need to
2:29:16rebuild our application because we're
2:29:18going to install I mean this is going to
2:29:20install some native modules and as I
2:29:23said previously anytime you install a
2:29:26new native module you need to rebuild
2:29:28your application. So here we go. This
2:29:31has been set it up but as I said we need
2:29:33to rebuild the dev client because this
2:29:36adds a new native module right. So I'll
2:29:39open up my terminal. Let's kill the expo
2:29:42terminal. I'm going to clear this up.
2:29:44I'm going to say mpx expo run iOS. Now,
2:29:48while this is building, we can take a
2:29:50look at the code like what happened? How
2:29:53did this um you know how how did we got
2:29:56the initialization. So basically we are
2:29:59getting the sentry SDK. So it is right
2:30:02here from React Native. Then we have the
2:30:05DSN which is like the connection string
2:30:07that connects us to this project that we
2:30:10just created. Then a couple of different
2:30:13options. Now here for the integrations
2:30:15we already have the session replay. This
2:30:18is going to take the screenshots or
2:30:21actually screen recordings anytime there
2:30:24is an error happening in your app. So
2:30:27you can take a look at it from the
2:30:29Sentry dashboard and we'll actually get
2:30:31into it in a second. But here I think I
2:30:34want to add some options. By default,
2:30:36Sentry sensors everything for privacy.
2:30:39But since we are in development, I think
2:30:41we can turn this off. So there is like
2:30:44mask options. I'm going to say uh mask
2:30:48all images. I think I'm just going to
2:30:50say false. By default, it's equal to
2:30:52true. And then I'll do the same thing
2:30:54for text
2:30:57and for the vectors.
2:31:00Okay. So we can save this and for logs
2:31:04here you can tell we just say enable
2:31:06them that's equal to true and that would
2:31:09be enough. Now other than this if you
2:31:11take a look at the cloud it says you
2:31:14need to get the oath token for the
2:31:16source source map uploads um it's pretty
2:31:20easy. All you need to do visiting the
2:31:22dashboard under the search just search
2:31:24for the organization tokens. So from the
2:31:28settings, it'll take you to the screen
2:31:30and let's create a new one. For the
2:31:33name, I'll just say kei
2:31:36token.
2:31:38I'll say create a token and then we'll
2:31:40copy it and then we'll just paste it
2:31:43under the env.
2:31:46So here I'll go ahead.
2:31:48Let me maximize the screen. This is the
2:31:51value and the key is going to be this
2:31:54one.
2:31:58So with this go ahead and save this
2:32:00file. Then here you can tell my
2:32:03application has been restarted and we
2:32:05got the session replay setup. I think
2:32:08now everything is fine to test out. So I
2:32:12think I'll just ask cloud to add a
2:32:14button. So I'll just say add a test
2:32:17button in the home screen. Let me just
2:32:20talk to it.
2:32:22Now I just want to test out if
2:32:24everything will work for Sentry. I want
2:32:27you to add a test button in the home
2:32:29screen where I can just press and throw
2:32:32an error just to check if Sentry is
2:32:35working and then we'll delete this
2:32:37button.
2:32:39So here we go. We just got the button.
2:32:41I'll go ahead and press that. It throws
2:32:44an error. Let's go into our dashboards
2:32:47under the issues. Just reload and make
2:32:50sure that you select the actual project.
2:32:53So in this case I have bunch of but this
2:32:55is the one selected. I'll just try to
2:32:58reload once again. And here you can tell
2:33:0020 seconds ago we just got this error.
2:33:03Let's go ahead and take a look at the
2:33:04details. And basically from this
2:33:06dashboard you can get access to every
2:33:08single detail about this error. You know
2:33:11the device, the operating system. We
2:33:13have trace ID which is something that
2:33:15we'll get into in a second. We have the
2:33:17part of the code that caused you know
2:33:20that was the reason for this error and
2:33:23then we have the session replay like
2:33:25here this is literally a video recording
2:33:28of that exact moment like when user
2:33:31press this button that's when this error
2:33:34happened and this is not only that you
2:33:36can scroll to the bottom and see all
2:33:38kinds of details and here I'll just let
2:33:41you let you to explore the dashboard
2:33:43there is one tool that I called
2:33:46previously ly like this is the sear
2:33:49which is basically a code reviewing and
2:33:52autofixing tool. So here you would give
2:33:55access to the repository and then it
2:33:57would basically take a look at the
2:34:00entire error context right it would see
2:34:03the code block why this is happening
2:34:05take a look at the session replay and
2:34:07then add a full fix I think we can get
2:34:10into it in a couple of minutes but first
2:34:13that was just for testing purposes what
2:34:15I'll be doing I'll just ask cloud to
2:34:17remove this button I'll just say okay it
2:34:20works remove that test button.
2:34:26So this will delete the button and
2:34:28instead what we would like to implement
2:34:30is going to be sentry locks. So here
2:34:33again they have the entire page where we
2:34:35can copy it with this button and paste
2:34:37it to our LLM. Right. And I think they
2:34:40have the copy prompt as well.
2:34:44Yeah, I think I'll just copy this one
2:34:46instead of copying the entire page in
2:34:48here. Basically we would like to enable
2:34:50it. This is something that we have
2:34:52already done with this option. Then
2:34:54there are a couple of different options
2:34:56for logging. So we have error info, we
2:34:59have warning, debug, trace. There is
2:35:02something called fatill as well. So this
2:35:05would be something that you would like
2:35:07to use you know when something is really
2:35:10really important for you to know like
2:35:11when the database doesn't connect or
2:35:14something similar. So you can take a
2:35:16look at the entire documentation but you
2:35:18know as of 2026 I think it's just
2:35:21important to understand what the feature
2:35:24is and how that work. The code
2:35:26implementation is something that we
2:35:29don't really get into that that much. So
2:35:32with that said I'll go ahead and say now
2:35:35I will paste the documentation of sentry
2:35:38logs and I want you to implement it in
2:35:40this project. We already enabled this
2:35:43under the root layout file. So all you
2:35:46need to do is finding proper use cases
2:35:49to include the sentry logs.
2:35:53Okay. So with this I'm going to paste
2:35:55this thing right here. Um wait is this
2:35:59enough? It says use curl to download
2:36:01read and follow.
2:36:04Yeah I think this should be enough
2:36:06because
2:36:08this will get the sentry skills I
2:36:10believe. Now I just pause the video and
2:36:12think of it for a second. I think this
2:36:14is for initializing the sentry like
2:36:17setting this up. We already set that up.
2:36:19So instead I'll just copy this entire
2:36:21page and I'm going to delete this part
2:36:25and I'll paste this one. All right. So
2:36:28cloud is done with it and we have six
2:36:30different places where we are using
2:36:32sentry logs. So the very first one is
2:36:35when the onboarding plan generated.
2:36:38Let's go ahead and take a look at it. It
2:36:40is under the API.ts.
2:36:42Now depending on the formula, we will
2:36:44either get the warning or the info as
2:36:47the logger, right? Depending on the plan
2:36:50source. And here you can tell we are
2:36:52adding some tags which will make it to
2:36:54be queryable and you know searchable
2:36:58from the sentry dashboard. So you can
2:37:01always go right here under the project
2:37:04and we will find the logs. I think we
2:37:07can get into it a little bit later in
2:37:09the video because at the time we don't
2:37:11really have any logs but you know if you
2:37:14imagine that you have a user base let's
2:37:17say like 100 users then this part will
2:37:21be really really helpful.
2:37:24Okay let's see what other logs we have
2:37:27when the onboarding is completed
2:37:31which is right here. As you can tell,
2:37:33this is just an information um you
2:37:36knowformational log. But if something
2:37:38fails, of course, we'll have it as an
2:37:41error log and we have the reason so that
2:37:44we can take a look at it and immediately
2:37:46jump into our codebase and fix the
2:37:49issues. Then we have for I think when
2:37:52the profile save failed. Yeah, which is
2:37:55this one. Then what else? When the meal
2:37:58upload failed. I think this is one of
2:38:00the most important use cases. And then
2:38:02another one we have is under the
2:38:04camera.tsx. Let's take a look at it.
2:38:09So I think it is this one here. We can
2:38:11tell depending on the outcome, we either
2:38:13have an info or warning. Okay. So that's
2:38:16the syntax. I think like you don't
2:38:19really need to memorize it at all. Just
2:38:21know what central logs are all about and
2:38:24the implementation is like really
2:38:27unnecessary at this point. So with that
2:38:30said, I think for now we are done with
2:38:33the logs. I'd like to keep this section
2:38:36as it is. Um in the next section we can
2:38:39get started with the profile screen. So
2:38:41with that said on top of logs let's go
2:38:44ahead and implement sentry tracing. Now
2:38:46before we try to implement it let's ask
2:38:48the question what is tracing in the
2:38:51first place? So tracing involves
2:38:53capturing the timing and flow of
2:38:55requests and operations as they happen
2:38:58in your application. This powerful
2:39:00debugging tool helps you identify which
2:39:03link in a sequence of events may be
2:39:05causing a problem such as slow
2:39:08performance. So that's tracing in simple
2:39:12terms. Here is a self-explanatory image
2:39:15as well. Now let's go into the React
2:39:17Native documentation specifically and
2:39:20copy this entire page. Paste it into
2:39:23cloud. Again, if you want to implement
2:39:25it, I think you just need to add this
2:39:27option first and then you just need to
2:39:30wrap your application with sentry.
2:39:34And this is something that cloud can do
2:39:36for us. So here we just need to go and
2:39:39paste the documentation. And before that
2:39:42or actually after this I'll say
2:39:46I have just pasted the documentation for
2:39:49sentry tracing. Please go ahead and
2:39:52implement this in my codebase in a
2:39:55simple in a simple way.
2:40:00So while cloud is implementing once
2:40:03again with tracing sentry will track our
2:40:06software performance measuring metrics
2:40:08like throughput and latency and it's
2:40:11going to display the impact of errors
2:40:13across multiple systems. All right. So
2:40:16this has also been set up. Now the more
2:40:19we use this app the more data we're
2:40:21going to see on the sentry dashboard. So
2:40:24at this point all we need to do is using
2:40:26the app making some more logs you know
2:40:29some more errors so that we can see them
2:40:31on the sentry dashboard. Okay. So with
2:40:34that said I think we can get into the
2:40:36profile screen. Now everything is fine
2:40:39but I just don't really like the UI and
2:40:42here I have a file under the design. So,
2:40:46I got this screenshot from Cali and I'll
2:40:49just ask cloud to kind of like get
2:40:52inspired by it. And under the profile
2:40:56screen, I think we need to have some
2:40:58must-h have links such as the privacy,
2:41:02you know, privacy policy and terms of
2:41:05services. Other than that, we need to
2:41:07have the log out button and delete your
2:41:11account button. Now if you don't have
2:41:13the delete your account button then your
2:41:15application will be rejected by Apple
2:41:18because you are storing the user data
2:41:20right we have authentication so we have
2:41:23to have delete your account option
2:41:25that's one thing that you should keep in
2:41:27mind the other one is having the privacy
2:41:30policy and terms of services because
2:41:33when you want to publish your app to the
2:41:36app store in their dashboard they ask
2:41:38you to provide a link for your privacy
2:41:42policy and it has to be deployed on
2:41:45somewhere. Now it could be as simple as
2:41:48you know like a Versel you know like a
2:41:50Versel URL or Netlfy you don't really
2:41:53need to buy a com URL so you don't need
2:41:56to pay but just have something that is
2:41:58up and running and for this later in the
2:42:01video we'll be using Cloudflare I'll
2:42:03show you how to set that up but yeah
2:42:06with this in mind let's go ahead and
2:42:08talk with Cloud here I'll open up a new
2:42:11instance and then I'll just say let me
2:42:14first attach this file it is called
2:42:17settings screen design.png png. And just
2:42:21before I start talking with clot here,
2:42:23I'll just say remove the invite friends
2:42:26button. We don't really want to have
2:42:28this feature, but I'm just going to
2:42:29leave everything that we have under the
2:42:31accounts. Even though most of them are
2:42:34not going to work, I just want to have
2:42:35this clean UI. And then for goals and
2:42:38tracking, I think we can leave the rest
2:42:40as well. On top of it, I'll ask a couple
2:42:42of different fields.
2:42:45Okay. So now I want you to build me the
2:42:47profile screen. I mean, we already have
2:42:49the profile screen, but I don't really
2:42:51like the current UI that we have. So,
2:42:54take a look at this attached image that
2:42:56I just provided, and I want you to get
2:42:59inspired by it and build the similar
2:43:02style and similar content for this
2:43:05profile screen. I want you to remove the
2:43:08invite friends section, but add the rest
2:43:11of it, like the account, goals, and
2:43:13tracking. And at the very bottom, add a
2:43:17button that says delete your account and
2:43:19also have some links to privacy policy,
2:43:23terms of services. So yeah, that's my
2:43:26entire prompt. Um, at the end, I had to
2:43:29cut the video, but here we go. Now, I'll
2:43:31just go ahead and run this. Let's see
2:43:34what it's going to come back with. If
2:43:36there is anything that we don't really
2:43:38like, we can always follow up. All
2:43:40right, so this is what we got back. I
2:43:41think it looks pretty crisp and clean,
2:43:44but there are a couple of different
2:43:45details that I'd like to fix. So, first
2:43:47off, the sign up button should be
2:43:49somewhere at the very bottom. And also,
2:43:52I think this component is kind of like
2:43:54unnecessary because we have this right
2:43:57here in the home screen. So, I'll go
2:44:00ahead and try to explain this to Cloud.
2:44:03So, overall, I like the vibe of this
2:44:06screen, but I want you to put the sign
2:44:09up button at the very bottom of the
2:44:12screen. Maybe like just above the delete
2:44:14your account button. And also get rid of
2:44:18the calls and tracking section. We don't
2:44:20really want to see these values under
2:44:22the profile screen because we already
2:44:25have them under the home.
2:44:28So, this is the updated result, but I
2:44:31think I'll just ask it to add some more
2:44:34fields like the personal details. I
2:44:36don't know this entire thing, even
2:44:38though they're not going to work. I just
2:44:40want to add them so it doesn't really
2:44:41look too empty.
2:44:44All right. So, overall, I like the
2:44:46profile screen, but just like under the
2:44:49settings screen, design.png, png. I want
2:44:52you to have the section with the
2:44:54personal details, preferences, language,
2:44:57and upgrade to family plan buttons. Even
2:45:01though they're not going to do anything,
2:45:03just have them for UI purposes.
2:45:08All right, so this is what we got and I
2:45:10think it looks pretty clean. Now when
2:45:12you press the privacy policy it will
2:45:14open up an example link which is
2:45:17something that we will fix a bit later
2:45:19in the video maybe in the next section.
2:45:22Now here when we press this button I'll
2:45:24just say you know uh go ahead and make
2:45:27sure that the data of the user deleted
2:45:30both from clerk and our database and I
2:45:34will also say that it should ask for a
2:45:36confirmation message.
2:45:41Okay, so with this let's go ahead and
2:45:43send it. Then it should be implemented
2:45:45pretty quickly. All right, so this has
2:45:47also been implemented. Basically, we can
2:45:49delete the account just by calling our
2:45:52API endpoint. It will delete the user
2:45:54from both database and from the cleric
2:45:57dashboard. Now here, notice how we don't
2:46:00really have extra spacing at the bottom.
2:46:02So I'll just say go ahead and add some
2:46:04pettings
2:46:06under the profile screen. Just add some
2:46:08pettings from the bottom. So the text at
2:46:11the very end is not really overlapping
2:46:14with the with the tab bar.
2:46:19All right. Now, as you can tell, we have
2:46:21this extra spacing. Now, we can go ahead
2:46:24and test this out where we will delete
2:46:26the account and we'll check if the data
2:46:28is deleted both from clerk and database.
2:46:32Now, just before I test this out, I'd
2:46:34like to follow up one more time because
2:46:36we would like to delete not only the
2:46:38user account, but we also want to delete
2:46:41the meals, right? Anything that is
2:46:44related to this user should be deleted.
2:46:47Also, the images that we have under the
2:46:49image kit. So, if you go under the media
2:46:52library, you're going to see that you
2:46:54have a meals folder. So, these are the
2:46:56things that I have uploaded in the past,
2:46:58but this is coming from this project.
2:47:01And under this folder you will see that
2:47:03we have couple of different images right
2:47:05these are the ones that I have uploaded.
2:47:08So if the user account is deleted we
2:47:11would like to delete these images as
2:47:13well because otherwise they would occupy
2:47:16storage for no reason. So I'll just
2:47:19follow up one more time and then we'll
2:47:21test this out. So here I'm just
2:47:23following up pretty quickly just to make
2:47:25sure that every single data for this
2:47:28user will be deleted once they delete
2:47:30their account. So this would be the
2:47:32clerk user, it would be the user from
2:47:35database, the meals that this user
2:47:38generated, you know, the images in image
2:47:40kit, literally everything that is rel
2:47:43that is related to this user account.
2:47:48All right, so looks like cloud has
2:47:49double checked. Now, let's go ahead and
2:47:51test this out manually. I'll say delete
2:47:53the account. If you say cancel, nothing
2:47:55happens. But if you say delete, we
2:47:57should be logged out in a second.
2:48:02Here we go. Now, we'll go back to
2:48:04database. We don't have the user. We
2:48:07don't have the meals. Let's go into
2:48:09clerk dashboard. If I reload, we will
2:48:12not have the user neither, right? Then
2:48:15if we go under the meals, I think these
2:48:18are the images that this user uploaded.
2:48:21So these are the ones that I have
2:48:22uploaded in the past. But these three
2:48:25should be deleted. That's what I
2:48:26believe. Okay. Here we can tell those
2:48:29images are gone and these are the ones
2:48:31that I have uploaded in the past. It has
2:48:34nothing to do with the previous session.
2:48:37All right. So with that overall
2:48:39everything is working as expected. I
2:48:41think from the welcome screen I'll just
2:48:44get rid of this text. I think it just
2:48:47looks too much.
2:48:49So here I'll search for it. It is called
2:48:52scan meals. Yeah, it is this one.
2:48:58So I'll just get rid of this text
2:49:00completely.
2:49:01I think this now looks way more cleaner
2:49:04than what we had previously. Okay. Okay.
2:49:07So with this let's try to sign in once
2:49:09again with with that previous account.
2:49:15So basically we are signing up now and
2:49:18then this should immediately take us to
2:49:20the onboarding screen instead of the
2:49:22home screen.
2:49:26Okay, here we go. I'll go ahead and fill
2:49:28this in.
2:49:31So, I just pretty quickly went through
2:49:33every single question and now this is
2:49:36going to build the plan in the
2:49:37background
2:49:39and then hopefully we should be able to
2:49:41have it.
2:49:43Here we go. Now, this will be saved. And
2:49:46by the way, I think this UI was
2:49:48something that we talked about in the
2:49:50past. It was broken, but now it is
2:49:52working as expected, right? We have
2:49:54proper spacing. Um, yeah, I think I
2:49:58think it looks clean. I'll just say
2:50:00continue. And this data should be saved
2:50:03to the current account. Here we go. It's
2:50:06the same values that we have just seen.
2:50:09All right. So, overall, everything works
2:50:11as expected in this section. I'm pretty
2:50:13happy with what we have so far. So, I'll
2:50:16leave the section right here. I'll close
2:50:18everything. Let's go ahead and stage all
2:50:21of our changes. Get a commit message.
2:50:24and then we're going to push this. So
2:50:26this is the commit message that we got
2:50:28from AI. I'll go ahead and commit. Then
2:50:30I'll say you know sync up the changes.
2:50:33All right. So with this in this section
2:50:35we have built entire profile screen. We
2:50:38have implemented the delete your account
2:50:40functionality and we have learned that
2:50:43you know you have to have those buttons
2:50:45which is for privacy policy and terms of
2:50:48services. In the incoming sections, we
2:50:50are going to build an actual legal page
2:50:53and we are going to link it to those
2:50:56links. And other than that, we have set
2:50:59up Sentry with logs and tracing. And we
2:51:02learned why you should use Sentry in the
2:51:05first place. All right. So, with that
2:51:07said, hopefully I'll see you in the next
2:51:08lesson.
2:51:10All right. So, this is where we left. To
2:51:12be honest, we are pretty much done with
2:51:14the entire application. like we have the
2:51:16basics working in the first place but we
2:51:19can add some additional features and
2:51:21some optimizations. For example, for
2:51:24this calendar we can add the feature
2:51:26where we can scroll through it and go
2:51:29you know two weeks previously right. um
2:51:33or when you press it should be able to
2:51:35show you this entire day and I think it
2:51:37is already doing that but yeah like all
2:51:40we need to do is just adding some
2:51:42optimizations and one of the
2:51:44optimizations that I'd like to add is
2:51:46going to be related to scaling the image
2:51:49when we scan a meal we would like to
2:51:52downscale it and then send it AI so that
2:51:55we don't really use extra credits so
2:51:58here I'll go ahead and have a prompt
2:52:00like this one I'll say downscale the
2:52:02photo before sending it to the vision
2:52:05model when we scan the food. And here
2:52:10I'll say oops I've accidentally pressed
2:52:12enter. So I'm going to pause this
2:52:16and then I'll say I'll let me just talk
2:52:20with cloud. So here I'll just paste the
2:52:23documentation of image kit. You can take
2:52:26a look at it take it as a reference and
2:52:29then go ahead implement that.
2:52:34Okay. So, I'll go back. Let's copy this
2:52:37entire file or this documentation for
2:52:40our LLM. And then right here, I'll paste
2:52:43this in. Now, while this is implementing
2:52:46this part, we can open up a new
2:52:48instance. And then we can say, you know,
2:52:51make this calendar to be scrollable.
2:52:55So under the homepage we have the
2:52:58calendar but I want to make it in a way
2:53:02that it could be scrollable back to two
2:53:05weeks or maybe just one week. It cannot
2:53:09go to further dates but it can go back
2:53:12in time and so yeah go ahead and
2:53:15implement it so that it can be
2:53:16scrollable.
2:53:19All right so this is probably not the
2:53:21best prompt but it should work out. And
2:53:24while these are getting implemented, I
2:53:26think I'd like to get rid of this
2:53:27button. It is kind of like unnecessary.
2:53:30That's what I believe. So I'm just going
2:53:32to search for it. Scan a mail.
2:53:38So I'll just delete this entire press.
2:53:40Well,
2:53:42okay, it's not gone. Let me try to
2:53:44reload the app. So once I reload it, as
2:53:48you can tell, that button is gone. I
2:53:49think this looks cleaner.
2:53:52And while this is implementing, we are
2:53:54getting some errors. But let's just wait
2:53:55for this to be completed and then I'll
2:53:57just be right back. And looks like we
2:54:00have a warning in this file. It says
2:54:03week map.
2:54:05Yeah. Okay. So, it's it's going to
2:54:07define the week and then it should work
2:54:09out. So, both of these features have
2:54:11been implemented. As you can tell, I can
2:54:13go back two weeks
2:54:16and yeah, I think it works without any
2:54:19flaws. Other than this, we also have the
2:54:22downscaling working. It is under the
2:54:24analyze meal here. You can tell like let
2:54:27me just show you that exact part. We
2:54:30have the vision transform and it's going
2:54:32to be using these arguments to downscale
2:54:36the image in real time with image kit.
2:54:39Now I have also asked cloud to create a
2:54:41test screen. And within this screen, we
2:54:44have bunch of different buttons where we
2:54:46can kind of like simulate the button,
2:54:48simulate the errors that we would get in
2:54:50real world. So when you press any of
2:54:52them, it's going to throw the error and
2:54:55we are going to catch it with Sentry.
2:54:57And then to be able to see the details,
2:54:59we can go into our Sentry dashboard
2:55:01under the issues under the feed. You'll
2:55:04be able to see all the errors that we
2:55:05got right here. So I'm going to reload.
2:55:11So these are all the errors that we have
2:55:13so far. And now let's go ahead press one
2:55:16of them.
2:55:18Now here probably you're going to have a
2:55:20button for see here that says you know
2:55:23set up your repository. Once you press
2:55:26that button this is what you're going to
2:55:27see. Just go ahead and say add
2:55:30repositories to this project and then
2:55:33select the current repository so that it
2:55:35will be able to you know take a look at
2:55:38the codebase and fix the issues. where
2:55:40is this coming from? So, we can
2:55:42literally just go ahead and start an
2:55:44analysis.
2:55:48This will take some time. It'll you know
2:55:51find the issue, find the solution and
2:55:53then it'll say this is the problem and
2:55:56here is what you need to do to get rid
2:55:58of this uh this error. So, after some
2:56:02time it gives me all the details and
2:56:04then at the very bottom it says do you
2:56:06want to make a plan or not? Let's just
2:56:08say yes. Let's go ahead and make a plan.
2:56:11Now, while this is getting the plan, the
2:56:13rest is just like what we have seen
2:56:16before. We have every single detail. And
2:56:18at the end, we also have the session
2:56:21replay.
2:56:22So, here are the steps to resolve this
2:56:25problem. Now, we already know what's the
2:56:27issue and what's the problem. But in
2:56:29real world, you will not be able to
2:56:31actually see it. So, here it'll it'll
2:56:33just tell you what you should do step by
2:56:35step. Now other than the errors there is
2:56:38also a button or like a widget where you
2:56:41can collect feedback from your users and
2:56:44I think we can implement this button not
2:56:47really inside this um inside this branch
2:56:50but maybe it can be somewhere right
2:56:53here. So, I'll go ahead and say
2:56:56I want to have the Sentry feedback
2:56:58button under the profile screen, but it
2:57:01shouldn't be like nested under the
2:57:04Sentry test bench. Maybe it should be
2:57:07just above the sign up button or, you
2:57:10know, somewhere in the profile screen.
2:57:12That would make sense.
2:57:15Now, from the dashboard, just head over
2:57:17to the search and search for user
2:57:20feedback. Now in my case it looks like
2:57:22we don't really have any feedback but
2:57:25actually we have and it went under the
2:57:28spam and that's because we said test
2:57:30right so sentry is clever enough to
2:57:34understand this is just a testing uh
2:57:37feedback because here we say this is me
2:57:39testing from development but if we send
2:57:41something you know an actual report it
2:57:45would be under the inbox. So here you
2:57:47can tell you know which user send it,
2:57:49how they send it, why they send it,
2:57:52everything is right here and like it
2:57:54even shows the linked error. So you can
2:57:57take a look at the error itself, not
2:57:59only the report or the bug. All right.
2:58:02So with all that being said, this is the
2:58:04basic version of our application. Now
2:58:07the rest is your creativity or the
2:58:09features that you would like to add. You
2:58:11need to follow the exact same steps that
2:58:13we have done so far. talk with cloud for
2:58:16UI just go ahead and generate the design
2:58:19in the same way that I have explained so
2:58:22far use the prompts so on right now here
2:58:26I'll leave it as it is and I'd like to
2:58:28commit my changes for this section and
2:58:31then in the next one we can get started
2:58:32with the privacy policy and terms of
2:58:35service and for them I also have a
2:58:38separate prompts that we'll get into in
2:58:41a couple of minutes so here I'll go
2:58:43ahead and stage everything and then
2:58:46let's get a commit message as usual.
2:58:48I'll close everything.
2:58:51Then we'll commit and sync this up. All
2:58:54right. So with this hopefully I'll see
2:58:56you in the next lesson.
2:58:58All right. So in this section we are
2:59:00going to set up our privacy policy and
2:59:02terms of service. At the moment when we
2:59:05press there is a link that is opening
2:59:07but it is just the example.com. We'd
2:59:09like to replace it with our deployed URL
2:59:13for you know privacy policy and terms of
2:59:16service and it's actually easier than
2:59:18what you think. So we need to just
2:59:21create a legal folder. This is what I do
2:59:23usually. This is exactly the same
2:59:26process that I have done while building
2:59:28my own application. So under the legal
2:59:31folder we will have some HTML files and
2:59:35some styling and then basically we are
2:59:38going to deploy that URL to Cloudflare
2:59:41for free. Then if you wanted to you can
2:59:43get an actual domain for like $5 or I
2:59:46don't know $10 depending on the type of
2:59:49URL that you would like to get. But in
2:59:51this video we'll do it for completely
2:59:53free. Okay. So before we get into this
2:59:56again I'd like to mention that if you
2:59:58don't have privacy policy or terms of
3:00:00service then your application will be
3:00:03rejected by Apple because when you
3:00:05submit your app they want you to put the
3:00:08links for these in their dashboard.
3:00:11Okay. And now for both of them I have
3:00:14two different prompts. I'm going to
3:00:16leave the link in the description. So
3:00:18let's go ahead and first get the terms
3:00:20of services prompt. So here you can
3:00:23basically pause the video and read it
3:00:25but we basically say just take a look at
3:00:28the entire codebase analyze it and
3:00:31generate a terms of service that would
3:00:34be production ready. Okay here I'll go
3:00:38ahead into cloud and then I'll paste it
3:00:41right here. And before I submit this
3:00:44I'll just follow up with a prompt. So
3:00:46here's my follow-up prompt. I said
3:00:48create the terms of services under the
3:00:51legal folder that we have right here and
3:00:54it should have just some simple HTML and
3:00:57CSS. I said make sure UI is looking in
3:01:00the same theme as our mobile app and
3:01:03there will be a landing page and in the
3:01:05navbar and footer we can have terms of
3:01:08services and privacy policy links. For
3:01:11now ignore privacy policy content. I
3:01:14will follow up for it later in the
3:01:16video. Right. So here this should create
3:01:18that landing page as well as the terms
3:01:22of service that terms of service page.
3:01:24Now here we can take a look at the Cali
3:01:28um landing page that they have. It looks
3:01:31absolutely beautiful and we can even you
3:01:33know give this as a reference that you
3:01:36can take a look at and you know build
3:01:38something similar to this one. Now how
3:01:41do we get these type of demo images
3:01:43right? So here I'll just try to walk you
3:01:46through it in a second. So for these
3:01:48screenshots there is a website called
3:01:50shots.so. Now they have both a free plan
3:01:53and paid plan. I didn't really bought
3:01:56their paid plan. I'm just using the free
3:01:58one and for me it is just enough. Okay.
3:02:01So this is what you're going to get
3:02:02initially from the screenshots. Let's go
3:02:04ahead and select iPhone 17 as our
3:02:07simulator. And then here we can add a
3:02:10background. Let me find it. I think it's
3:02:12going to be under the frame here. You
3:02:15can have a solid background, but since
3:02:17we just want it to look like this,
3:02:20right? Like it is just only the image.
3:02:23So for that reason, for the background,
3:02:25we'll just have transparent. And then
3:02:27what I do is zooming in as much as
3:02:29possible so that I get rid of these
3:02:32extra spaces from the top and from the
3:02:35bottom.
3:02:36Maybe something like this. And then we
3:02:39need to select the media. Now, what you
3:02:41would like to do is going back to your
3:02:44simulator
3:02:45into your application and then taking a
3:02:48screenshot. So, right here, let's go
3:02:50ahead and I don't know, take the
3:02:52screenshot of this part. Let's say copy
3:02:55this image. I'll just copy to clipboard
3:02:58and go back and I'll just paste this in.
3:03:01Here we go. Now, we have the image. All
3:03:03we need to do is installing it
3:03:07or exporting it. Now with this we can go
3:03:10back to VS Code under the legal. I'll
3:03:14just have it right here. And I'm going
3:03:16to say demo one.png.
3:03:19Once we have the UI, we can basically
3:03:22use this image in that uh you know in
3:03:26that specific file or in the UI. Now
3:03:29here let's just answer some of the
3:03:31questions that we have from cloud. So
3:03:34this is the first question. This is my
3:03:36answer. You can take a look at the next
3:03:38one. This is about the age. Then we have
3:03:40disputes. I'll just go with the
3:03:42recommended options. But you know this
3:03:44is a tutorial so I'm just going pretty
3:03:47quickly. Um if you're building your own
3:03:49application and if you want to deploy it
3:03:51of course you need to take some time and
3:03:53you know read them actually and then
3:03:55answer depending on your situation like
3:03:58maybe your application is only 18 plus
3:04:01age right? So you don't really want to
3:04:03select this one.
3:04:06Now, while this is building it, let's go
3:04:08back to our screenshots or the demo
3:04:11images. Now, here you can tilt it if you
3:04:14really wanted to, but I think they
3:04:16already have the options. So, just go
3:04:17ahead and select it. Then, what I would
3:04:19do again, I would zoom in as much as
3:04:21possible. Then, I would export it, then
3:04:24use it in my homepage. Or you can even
3:04:26have screenshots like these. And on top
3:04:29of this, you can have two or three other
3:04:33options just like this one. Right? Then
3:04:36you would take more screenshots and
3:04:38paste them right here. Then export the
3:04:40image or you can have two if you really
3:04:43wanted to.
3:04:46So these are the things that we have
3:04:47done in one of my previous courses as
3:04:50well. And this is what we have built. It
3:04:52was an AI trip planner. And here you can
3:04:54tell this is how we created those
3:04:57images. So we have one for you know like
3:05:00with the two options with only one and
3:05:03one tilted. Then we have a privacy
3:05:06policy.
3:05:08It is right here. Then we have a terms
3:05:11of service and you know everything is
3:05:14built with cloud in that tutorial as
3:05:16well. Okay. So with this you have
3:05:17learned how to create these type of
3:05:19images for your future projects. All
3:05:22right. So cloud is done with it. Before
3:05:24we take a look at the end result here
3:05:26under the legal folder we have couple of
3:05:28different files such as the index which
3:05:31is our landing page. Then we have
3:05:33privacy HTML as well as terms of
3:05:35services. Then we have all of our
3:05:37styling under the style. CSS. And I
3:05:40think it got the logo as well as the
3:05:42phone mockup. These are the images that
3:05:44we already had under the assets. So it
3:05:47basically copied them from here and
3:05:49pasteed right here. Now with that said,
3:05:52let's go ahead and double check. And I
3:05:55think this looks absolutely disgusting
3:05:57or just something that I didn't like at
3:05:59all. It looks pretty AI. Now I'll say
3:06:03you know we would like to fix this and
3:06:05I'll give Claude a reference in this
3:06:08case that's going to be Cali. I think
3:06:10this looks very clean like white
3:06:12background and I don't want to have the
3:06:15dark theme in the first place. So
3:06:18there's an extension called go full
3:06:20page. If you press this extension, it'll
3:06:22basically take the entire page as a
3:06:25screenshot
3:06:27and then you can copy it,
3:06:31then paste it right here. Then we can
3:06:33follow up with a prompt. So here is my
3:06:36prompt. Please pause the video and read
3:06:38it. Then I'm going to send this. Let's
3:06:40see what we're going to get back. All
3:06:42right. So Cloud is still building it.
3:06:44And I have realized one thing about this
3:06:46image, which is that we have a shadow.
3:06:49So, usually I remove it. I forgot to
3:06:51tell you, but let me actually display
3:06:54pretty quickly. Under the mockup for
3:06:57shadow here, you would like to have a
3:07:00none. Okay. So, I'm just going to say
3:07:01get rid of that so that we don't really
3:07:03have this shadow right here. It looks
3:07:07off.
3:07:09So, you'd like to get rid of the shadow.
3:07:11Then again, zoom in as much as possible
3:07:14to get rid of those spaces from the top
3:07:16and from the bottom. Then let's try to
3:07:19export it. So I'm going to bring it back
3:07:21to VS Code.
3:07:24And actually I'm going to delete demo
3:07:271.png and rename this to be demo 1.png.
3:07:33Now here you can tell that background
3:07:35shadow is gone. And I'll just ask cloud
3:07:38to make this larger.
3:07:43But first I'll wait for this to be
3:07:44completed. So here I just simply follow
3:07:47up and say make this look a little bit
3:07:49larger. And here is the end result. So I
3:07:51think this is looking pretty cool and we
3:07:54have the terms of service page as well.
3:07:57Now in the exact same way I'll go ahead
3:07:59and copy the prompt for privacy policy.
3:08:03And then I'll just paste it right here.
3:08:08And by the way, while this is building,
3:08:10currently our privacy policy has just a
3:08:13placeholder. Now it's going to go ahead
3:08:16and you know add the actual content. Now
3:08:19the other thing that I want to mention
3:08:20is that AI doesn't really know your full
3:08:23legal name or the registered address. So
3:08:26it's going to give couple of different
3:08:27placeholders thanks to this prompt that
3:08:29we have and then you can just read this
3:08:32entire file pretty quickly just by
3:08:34taking a look at the placeholders and
3:08:37update them with your actual values. All
3:08:39right. So after some time we have
3:08:41privacy policy ready as well. Now again
3:08:44you would like to update the placeholder
3:08:46values with your actual details but
3:08:48other than this I think we are
3:08:50completely fine to deploy this
3:08:53um deploy this legal page. So for this
3:08:56we'll go into cloudflare you need to
3:08:59sign in and create an account. It's
3:09:02completely free to get started with.
3:09:04This is what I'll be using. You can use
3:09:06Versell netifi or any other options
3:09:08really. They have a CLI tool. I'm
3:09:11talking about Cloudflare by the way.
3:09:13They have a CLI tool called Wrangler.
3:09:16And what you can do is just asking cloud
3:09:18to set this up for you. It is called
3:09:21Wrangler. I already have it. So here
3:09:23I'll just say So this is my prompt. I'll
3:09:25just send it and let's see what we're
3:09:27going to get back. All right. So here we
3:09:29go. It's been deployed. I'll go ahead
3:09:31and controlclick to it. As you can tell,
3:09:34we had it in local host, but now we have
3:09:37it on an actual domain. So here in my
3:09:40case it kind of confused the bulky
3:09:43aai.app which is my actual URL for my
3:09:46real application.
3:09:48So I just said you know don't mess this
3:09:50up. Leave it everything as it is. U this
3:09:53is just a demo project. Um yeah go ahead
3:09:55and implement that. So that's my prompt
3:09:57that I have done off camera. Other than
3:10:00this just with one single prompt we got
3:10:03our application or the landing page
3:10:05deployed on the web. We have terms of
3:10:08services. Let's go ahead and double
3:10:10check. It's working. And then we can go
3:10:14and visit the privacy policy as well.
3:10:19So there is one thing in the footer that
3:10:21I just realized like this button the
3:10:25text is not really visible. You can
3:10:27follow up with clot you know say make
3:10:30the colors um make the colors to be
3:10:33white just like in the navbar. Okay. So
3:10:35the rest is just following up and
3:10:37customizing the screen. There is nothing
3:10:39else left on this landing page as well
3:10:42as the um legal pages. All right. So
3:10:45that was the entire project. I hope you
3:10:47enjoyed it and learned something new
3:10:49from it. Now basically using this exact
3:10:51same workflow, you can build any kind of
3:10:53app that you ever wanted to. Now just
3:10:56for the record I have created a script
3:10:58file so that I can basically add some
3:11:00test data to my database without
3:11:03actually scanning my you know without
3:11:06actually scanning some food. So that's
3:11:09what we have done. I just asked it to
3:11:11cloud to add this data. Um so yeah if
3:11:15you see this in the in the source code
3:11:18don't get confused. So with that let's
3:11:20go ahead and commit all of our changes.
3:11:22Then we will end this course. So here
3:11:25I'll go ahead and just say stage every
3:11:27single change.
3:11:29Let's get the commit message and then
3:11:31we're going to commit this
3:11:37and then we'll sync this up. All right.
3:11:40So with this we are completely done with
3:11:42this project. I'll make the source code
3:11:44free as well. You will find the link in
3:11:46description. So with that thanks for
3:11:48watching and hopefully I'll see you in
3:11:50the next one.

About this transcript

This page contains the full transcript of How to Build Real Mobile Apps with Claude - FULL COURSE by Codesistency, generated from the public captions YouTube serves with the video. The transcript has 32,121 words across 4,414 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.