§ 01 · The Hook
The bait, then the rug-pull.
Nick Saraev opens with a promise that lands before the first minute is up: by the end of this video, you will have a working app running on your actual phone. He runs a $300k/month business almost entirely on Claude Code, and this course is his answer to the single most-requested question he gets.
What the video promised.
stated at 00:22“By the end of this video, you will have a working app running on your actual phone.”delivered at 59:34
Where the time goes.
00:00 – 01:19
01 · Hook + course overview
Promise statement, course structure, three apps previewed, no prior experience needed.
01:19 – 04:23
02 · Setting up Claude Code
Claude.ai signup, Antigravity IDE, Claude Code extension, hello-world demo.
04:23 – 09:56
03 · Mobile dev environment + framework comparison
Expo + React Native vs Flutter/Firebase vs Capacitor. Framework comparison diagram shown. Expo Go install and QR scan live test.
09:56 – 23:58
04 · App Design Framework
Five-stage framework: Core Function, Core Loop, Accessory Features, Surface Area Check, Retention Hook. Applied live to habit tracker spec.
23:58 – 59:34
05 · Building the Habit Tracker v1 (local)
Scaffold via /init, implement all five framework stages, test via Expo Go and iPhone mirroring, multiple rounds of UX fixes.
59:34 – 1:25:00
06 · Adding Supabase database + auth
Local storage to cloud migration. Supabase project setup, schema auto-generated, email/password auth, local-first caching architecture.
1:25:00 – 2:00:41
07 · Adding AI coaching features
AI coaching architecture: Supabase Edge Functions to Claude API (Sonnet) to coaching messages + push notifications. Smart nudges and weekly/monthly reflections.
2:00:41 – 2:12:18
08 · Security audit
Claude runs security audit. RLS policies, rate limiting, auth token validation, source map exposure checks.
2:12:18 – 2:56:32
09 · Building CalTracker (AI calorie tracker)
Second app: photo-based calorie logging via Claude vision. Coolors palette, serif typography, weight tracking, TDEE user profile.
2:56:32 – 3:33:46
10 · Building Pomodoro Forest (AI design)
Third app: AI-generated visual design using Dribbble inspiration + structured design brief. Forest/tree-growth metaphor.
3:33:46 – 3:56:40
11 · App Store + Play Store submission
Expo EAS build, Apple Developer account, App Store Connect, screenshot generation by Claude, TestFlight, full submission walkthrough.
3:56:40 – 4:03:20
12 · Monetization close
Maker School community pitch. 90-day money-back guarantee. First client or full refund.
Visual structure at a glance.
Named ideas worth stealing.
09:56model
Five-Stage App Design Framework
- Core Function
- Core Loop
- Accessory Features
- Surface Area Check
- Retention Hook
Any successful app needs exactly one core function, a sub-30-second action-reward loop, accessory features that serve the loop, 5-7 screens max, and a retention hook that creates an unfinished state.
Steal forAny app Joe builds — JoeFlow, MCN+ tools, future micro-apps
1:25:00model
AI Coaching Architecture
- Mobile App
- Supabase Edge Function (serverless)
- Claude API (Sonnet)
- DB coaching_messages table
- Push notification to device
Serverless edge function fires on schedule, reads user habit/streak data from DB, sends to Claude with coaching prompt, stores result, delivers as push notification.
Steal forAny AI-powered scheduled feature in any app — coaching, summaries, check-ins
2:12:18model
App Build Order
- MVP Ideation
- Build
- Design
- Test (emulator + real device)
- Add DB
Build function first, design second. Use Dribbble for inspiration, generate a structured design brief, feed to image generator, implement.
Steal forAny product Joe ships — validate function before polish
Lines you could clip.
54:10
“A $20 a month subscription. I was able to build a better app than 90% of what is currently available on the App Store. And I was able to do it entirely myself.”
30:50
“Anytime AI tries to hand something off to you, asking it to do it for me does 80 to 90% of the work.”
1:41:40
“We are just translating two currencies — tokens and money — to feature.”
35:00
“Every app that is ever trying to tell you that people using it once is their goal is lying to you. The whole job in app development is you want people coming back.”
How they spent the runtime.
Hook length47s
Info densityhigh
Filler8%
Things they pointed at.
How they asked for the click.
3:56:40product
“I also run a community called Maker School. Ninety day money back guarantee — if you do not get your first client by the end of ninety days, I will actually give you all of your money back.”
Earned soft-pitch. Self-aware framing. Stacked with credibility: Skool #1 ranking, Alex Hormozi + Sam Evans meeting, 2,000+ members.
Word for word.
HOOKopening / re-engagementCTAthe pitchmetaphorstory
00:00HOOKHey. This is a full course on how to build a real mobile app with Cloud Code. So from nothing to a working app on your phone, whether it's Android or iOS. I run a business that does around 300 k a month, and it's almost entirely built on Cloud Code now. I've also shipped several web apps and SaaS products. And the number one most requested video I get is how do I take all this awesome knowledge and use it to build mobile apps? That's exactly what I'm gonna show you guys how to do today. By the end of this video, you'll have a working app running on your actual phone. It's not gonna be a mock up. It's not gonna be some sort of emulator. It's gonna be a real app that you could show people as well as the App Store and Play Store links.
00:32HOOKAnd you don't need any prior mobile development experience. If you guys can type an English sentence into a terminal, you'll be able to follow along just fine. In terms of what to expect, first, I'll show you guys a finished app that's running on my iOS phone in under two minutes. Then we'll set up everything from scratch. So cloud code, uh, the mobile development environment, and then your phone as a testing device. Then I'll walk you through how mobile apps, like, actually work. And there are a few different frameworks you can use to build these things, but I'll focus on a couple in particular. I'll talk about React Native. I'll talk about Expo, and so on and so forth. Then we'll actually build an entire app together. I'll show you how to test them in your phone in real time as we build. Then we'll just repeat that exercise another three or four times. So you guys get really used to building apps with different levels of functionality. And at the end, I'll show you how to take these apps and submit them to the App Store and then the Google Play Store. Okay. So hopefully, you guys are as excited as I am. Uh, use the bookmarks and chapter headings down below to save your spot and jump around as needed, and I'll catch all y'all in the video.
01:20So I have an app right over here that I wanna show you guys. It's just a simple habit tracker app. Obviously, doing it in this form is kind of annoying. So what I've instead done is I've loaded this up locally on my computer. And I want you guys to know from an interface perspective, it's the exact same thing. It's just you are going to need to run these on your computer in order to do the design and so on and so forth. That's the whole idea.
01:39And as you guys can see here, it's like a simple onboarding page. I've set the resolution here to mobile. You know, you you can create your first habit. I don't know. Maybe I wanna do, like, a training habit of three times a day with a specific color. And then as you guys could see, you now sort of have that laid out. You know, if I tap this, I can sort sort of fill that up logically.
01:57Um, this is more or less the exact same thing as any, you know, mobile app that you might see in the App Store that does the same thing. And I did this in legitimately less than five minutes using Cloud Code and then a couple of cute little prompt templates that, uh, allow you to build these sorts of things and scaffold them really quickly. Now the development system I'm gonna show you guys in today's video is gonna involve developing it as a web application first. So that is something that is accessible in a web browser. The benefit there is obviously you can design something and then push it out for the web so you can have it on the website, uh, and then you can also port it over to your phone. Then we can optimize it for phones, uh, as well as things like tablets and so on and so forth. And it's probably the simplest and and most straightforward one, but I also wanna be clear that it's not the only way to build an app. I'm also starting off with a cute little habit tracker example here just because this usually involves most of the functionality that people want in an app. Usually, you want, uh, some sort of database of some sort. You want a way to read the database. You want a way to, you know, send information to the database, modify it. Then you want some sort of front end feature that, you know, interacts with the database in particular way. You want, you know, some sort of authentication setting, which I'll show you guys how to build. And then, you know, you want some sort of, like, cute little functionality.
03:03But by no means is this the only sort of app you can build. You can build literally anything. As we progress through the course, I'm gonna show you guys how to build apps that use AI to do really cool things. For instance, this app, Cal AI is a good example of, you know, weaving AI into traditional app functionality. You can take a photo of something and then, know, send it off to an API. They just sold for 50 to $100,000,000,
03:21I think, to MyFitnessPal. So you'll get to the point where you can build apps just like this. We'll use similar sorts of designs and stuff like that by the by the end of this course. And so the progression I want you guys to think about is we're gonna start over on the left by building a local habit tracker app. That's going to include no API, so we're not gonna send or receive requests to any third party services. We're just gonna store it all locally.
03:42We're not gonna have any sort of database. We're just gonna do it sort of directly on our phone or in the local storage. From there, we're going to add an API on. And so, you know, we're gonna be using functionality that somebody else has created, but we're gonna wrap that in our app. Then we're gonna add a database on. Then we're gonna push this over to a cloud solution.
03:59And then finally, we're gonna have cloud. We're gonna have an API. We're gonna have authentication. So we're gonna have some sort of login screen and then a database more similar to that app that's sold for, you know, between 50 to $100,000,000. So whatever your goals are, you'll be able to meet them in this course. I just wanna make sure that everybody's on the same page here, you don't see me developing a habit tracker app and be like, oh my god, this is such a crappy thing. Why the hell would anybody, you know, design the hundredth habit tracker app? The the habit tracker app is the means to an end, it's not the actual end itself. Okay. Without further ado, let's actually talk about how we're going to build this, including Claude code, setting up our development environment, and then also setting up our phone as a testing device before doing some some real basic dev just to show you guys what this looks like in practice.
04:36So step one of building mobile apps with Claude code is having Claude code. And so in order to do that, just go to claud.ai/ login. You'll see a page that looks something like this. Obviously, their design may have changed by the time that you guys are taking a look at it. And then you can either continue with Google or enter your email. So I'm just gonna enter my email address. After that, you'll get an email sent that allows you to sign in. And then once you're signed in, you'll have a variety of different plans shown to you. Now I'm actually already on the highest plan over here called the Max, but you guys are fine signing up with the pro at least for this demo. Anybody stalking at the price, uh, $20 a month is probably the highest return on investment you will ever get. I use Cloud for more or less everything now. Uh, as mentioned, this several $100 a month plan legitimately runs a $300,000
05:22a month business. So talk about ROI. Personally, I would just get at least one month, learn as much as you can. And then if you wanna experiment with local models and other approaches and stuff like that to save on costs, feel free to do that. It's just best to learn at least initially from the source. So I'm not gonna click downgrade because I already have my account. But assuming that you do, it'll take you to a quick payment page and then you can customize your cloud. And then once you're done, you'll have a page that looks something like this. So I'm just gonna say, hey, what's going on? And Claude will get back to me essentially giving me a a response.
05:50What's on the docket? People even say that anymore? I don't know. Now the thing to know about Claude, if it's the first time you're using it, is this right here is your Claude chat. Okay? But in order to do things like develop and design mobile apps, we got to move away from the vanilla Claude chat. We got to move towards a little more complex of a feature called Claude code. Now Claude code has a bunch of different ways to visualize and use. K? And this little space invader down here is gonna be omnipresent if you're doing coding, so get used to it.
06:19Um, you can do so directly in the Claude code web app here. You can also download the desktop app, which a little button at the bottom left hand corner, you can download from Mac OS or Windows. Or you can use a third party service like anti gravity or Visual Studio Code to manage all of your files and then also communicate with Claude. And in my case, I much prefer that last option. And that's what this looks like here. You basically have a little Cloud Code window open. You have all your files on the left hand side.
06:48And then what's really cool is because you have this much granularity and access to all of the files, you know, you can usually build much more sophisticated sorts of apps. So that's what I'm gonna be using throughout this course. But I do want you guys to know, you can use whatever interface you want. The reality is these are all just wrappers around like the brain of the model, the the the actual intelligence.
07:08Whether you communicate with, you know, an integrated development environment style app like me or whether you communicate with Claude code, you're just using the claud.ai/code website. All of this is is the same thing at the end of the day. Now, if you wanna follow along with my tutorial, how to set it up in this sort of interface. Well, you've already signed up to Claude, so you only need one more thing and that's the actual app itself.
07:30So in my case, I'm using this app developed by Google called Anti Gravity. Anti Gravity is pretty great. It's just really simple. It shows all your files and stuff like that. It's technically a Google product, so they're gonna try and use their own models or at least get you to. But I'll show you guys how to avoid that. Just head over to that download page, check your whatever operating system you're in, and then download the correct
07:51executable for you. So in my case, that's Apple Silicon. And then I'll all I have to do is click on this little anti gravity one dot d m g. Obviously, will be a little different if you guys are in, you know, Windows or something else. And then in my case, all I have to do is just drag this little anti gravity thing over to the applications folder. Now after I do that, I'll get a page that looks something like this. So there'll be a little anti gravity logo. There'll be a little agent panel on the right hand side. May seem really intimidating. Don't worry too much about this. Just gonna close the agent view and then head over here to where it says extensions.
08:20And the extension that I'm looking for is called the Claude code for Versus code extension. So I'm just gonna type Claude code for Versus and then you can see that we have the Claude code for Versus code extension right over here. Now in my case, I've already installed it, but all you have to do is just give it a quick install. I'm just gonna click auto update here and then maybe go install specific version and then update to the most recent just so you guys can kinda see what it would look like when it's installing. So boom, I just installed mine. What's really cool is after you're done, k, you'll see this little Claude icon pop up everywhere. So I'm just gonna exit out of this and then I'm just gonna double click anywhere on the page to open a new file. And then you'll see that little Claude icons anywhere. So now if we just click this and then exit out of all this other confusing stuff,
09:02you'll see that we basically now have a chat with Claude and we have that little space invader. So now I can say, hey, what's going on? And then I could get back to me saying, hey, how can I help you today? If that doesn't happen, you may need to log in. In which case, you can slash log in, type Claude account with subscription. That's then gonna open up a page, which will basically do the same thing that you did a moment ago where you where you logged into your Anthropic
09:23account. In any case, the whole idea is to get a screen that looks something like this, as long as you have a cute little Claude code guy somewhere on the page, you're good to go. From here on out, I'm just going to send a couple of brief prompts over to Claude code and have it build us something really quick, just so you can convince yourself that it's indeed working.
09:41HOOKSo on the left hand side, there's a little open folder button. I'm just gonna click open folder, and then I'm gonna go new folder, and I'll say, I don't know, example project. The reason why I'm doing this is because, you know, we wanna be able to see the files that clot outputs. And every time I do this, just because of the fact that Google's trying to push their own products, it's going to change the interface and so on and so forth. Right? So I'm just gonna have to reopen up a little Cloud Code terminal and exit out of the the native Google one.
10:05HOOKOnce we do that, we'll have Cloud saying welcome back, and I'll say, hey. Make me a really simple one page site in the current directory, then open it. This really simple one page site isn't a lot of context. Might ask you some questions, might not. The whole idea is I'm just gonna show you guys how easy it is to build a web property. K? So now we have a web property set up here. Claude actually just built this. I could say, adjust this so it greets me, Nick.
10:33HOOKAnd now if I go back to that page here, um, you know, after it makes the edit, you can see that it just swapped the name from world to Nick. K. So hopefully, you guys see it's not very complicated or difficult to build things. Usually, the more difficult part is just building the right things and then getting those things onto the Internet somehow. But don't worry about it. I'm gonna show you guys how to do all of that as well.
10:53HOOKSo now that we've figured out how Cloud Code works and done a quick little demo, let's move into our mobile app development environment. It's clearly one thing to build a website like I just did here. Right? And this is currently existing on my computer. But if I wanna get this over to my phone, and then not only do I wanna get it over to my phone, but if I wanna share it with, you know, potentially hundreds of thousands of people and make something viral, we gotta go one step further.
11:15HOOKThe way to build an app nowadays tends to revolve in one of these three methods. Now, don't worry too much about the terminology or the platform names. You don't need any experience or any funk familiarity with this stuff. I'm gonna walk you guys through it all regardless. But basically, there are three current methods. The first is using something called expo and react native.
11:36HOOKAnd this is actually the preferred approach that I'm gonna show you guys how to do. Essentially, we're doing is we're making use of a particular set of programming languages, JavaScript and TypeScript. We then have one code base, and this code base allows us to push out to our iOS apps. It also allows us to push to, uh, Android. And then as mentioned, you can even open up like a web app as well. So you can have it like, you know, on a website somewhere.
11:58HOOKYou do cloud builds via the expo, I think, like, building system. Uh, that's more technical terminology, but essentially, that just offloads a lot of the work onto a standardized tool that just knows how to do the sorts of builds that we're talking about, get things ready for deployment. It's got a really huge ecosystem of supported apps and other files. Then it also allows you to do hot reload on device, and that's valuable, especially for testing purposes because you typically have to reload the app over and over and over again. And so this is what we're gonna be doing, um, for our app. We're gonna be using Xbone React Native. And I'm gonna walk you guys through, you know, how all of that works in a moment. But I also wanted to run through a couple of the other common ways because, hey, if you clicked on a course that's multiple hours and then you decided to learn all about app development, you might as well learn some of the lingo so that when you're talking to your app dev friends and they say they're using capacitor or Flutter and Firebase, you know, you can actually reason with with them reasonably well. Okay. So everybody else basically uses tools like Flutter and Firebase.
13:00HOOKAnd so this takes advantage of a different language called Dart, k, which is I think custom developed by Google, specifically for the purposes of designing apps for their Android ecosystem. It also involves their own UI toolkit. The value there is basically Google has their own really opinionated, like, design system. If you've ever been on, like, a an Android app, for instance, you'll know the buttons tend to look pretty similar. You know, the modals tend to look pretty similar. All that stuff is very, like, opinionated. It's very set.
13:25HOOKAnd the benefit there is when you have an opinionated design system, it's pretty easy to put something together. You just kinda borrow their design. You don't have to build that stuff from scratch. But obviously, the downside is you get limited in what you can do with the design. And if you think back to my little habit tracker app, the streaks, which I'll walk you guys through in a moment, you know, this, uh, design is a really particular style that you probably wouldn't see in an Android app right out of the box. We're using slightly different fonts like serif fonts,
13:49HOOKthe, um, little containers and stuff like that have different sort of like border and, uh, you know, corner radius. That's like the curve. You know, you have different types of capitalization and stuff like that. And some of the interactivity, the little bounces and stuff like that just look different. So that's that that's that opinionated design. This is me making one up myself. And and ultimately, I think that's what most people want. They want the ability to design their own app the way that they want to. What's cool is they also allow you to use their own back end, so Firebase and all of the apps are very like well optimized to use Firebase. K, which typically means, you know, for enterprise level stuff, you get faster reads, faster writes, and so on and so forth. Um, these are those material design widgets that I was talking about as part of their their UI toolkit. Then it's also compiled to native ARM processors, which again is like a highly optimized thing. It allows the app to run better on, you know, their their devices.
14:37Um, so there's nothing wrong with using this approach. I just I'm choosing not to in this course because, you know, I don't really want anybody have to worry about languages that aren't really well understood. I don't really want you to feel locked into Google's, in my opinion, not as nice UI. And then I don't want you to have to worry about, you know, choosing the Firebase database or, uh, you know, high level performance optimization. I want you guys just, like, worry about getting an app out. Finally, there's capacitor, which I believe some might think is even easier to use than Xbone React Native.
15:04It it's it is really easy to use. You basically just, like, build a website. Okay? So literally this website right over here, and then you just wrap it with features that allow you to export that to, you know, the App Store and and whatnot. Um, it uses languages that most people are really familiar with, like HTML, CSS, JavaScript, and stuff like that. Uh, you can access your device APIs via plug ins, so it adds like an additional layer between the device and then, you know, the functionality that you want your app to have and then your website. Then it's also really, really easy to migrate. But, know, you're here to learn how to build apps first, not necessarily websites. I have a lot of great tutorials that show you guys how to build the best websites ever. Um, I find if you are optimizing for everything right off the the get go, you're probably not as good at anything in particular. And so this to me strikes a really good balance between, like, hyper optimized, you know, app dev in a specific language, in a specific database type,
15:52and then really general sort of website stuff. I know the app developers in the comments are probably already about to scare me, but, uh, that's okay. Let's just get you up and running with Expo and React Native. So how do you actually get set up here in Expo and React Native? Well, the first thing I'm gonna do is I'm just gonna use a built in slash command called slash clear.
16:09And that's just gonna get rid of all of the conversation history that I had with, you know, Claude previously. The benefit there is it's also gonna keep my token count a little bit lower and, uh, ensure that whatever I'm working on is just as as efficient as humanly possible. Now inside of my little folder example project with this index dot HTML that I put together here, what I'm gonna do is just right click this. I'm just gonna delete it. Cause I don't really want, you know, anything in my folder for what I'm about to say next. And then all you have to do is say, I want to build a mobile app with expo and react native.
16:39Set up my workspace for me. Now, if it's the first time you're using Claude, let me just zoom out of this and then click on this button right down here and click settings. And there's actually a little toggle that allows you to allow dangerously skip permission. So that's personally what I click by doing that. Uh, Claude just, you know, can do whatever the heck it wants. I don't really have to wait for it to to work and so on and so forth.
17:01Okay. Great. So if we head back over here to folders, which I actually see everything that's laid out, you'll see that Claude now has like created a whole workspace. And, um, it really is as easy as that rather than try and, you know, download a template from somewhere or whatever. What it's doing is it just it already knows about expo setup. It already understands the different files and stuff like that that you need in order to create, a working app.
17:22And, know, now now we basically have something. So what I'm gonna say is I create a simple demo application, some habit tracker for demo purposes,
17:32and then let me launch it on my phone. Okay. So what it's going to do now is it's gonna plan out a habit tracker demo app, probably pretty similar to the one that I showed you guys, although I'd imagine with much simpler features. And then it's gonna go ahead and and do the building. And this is not rocket science. As you guys could see, I've just made a couple of simple requests.
17:52You know, it's not as easy as it seems necessarily. There are a couple of technical things and issues that you'll run into if you don't know what you're doing. So I'll walk you through that when it comes up. Alright. Now, it's taken about a minute and a half to two minutes here to plan out the habit tracker demo app. You may be, you know, really chomping at the bits to just skip to the end and so on and so forth. But I encourage you to to watch alongside me. You know, I'm trying to strike a good balance between
18:19submitting a message and then immediately jumping to the finished output. Um, I don't want to do that because I think it's important for you guys to realistically see how the tokens are generated and what the model is saying in every step. But understand that any sort of development with agents involves offloading your own brain a little. Right? Your own intelligence.
18:39And so you do have to wait a fair amount of time for it to work. Now, it'll give you a bunch of fancy pants code and this code might be kind of intimidating. What this is doing is it's just it is currently performing the writing action of like putting this in a file somewhere so that it can work with it. You guys see errors pop up and stuff like that. Don't worry too much about this. What's really cool about Claude is it's capable now of solving its own problems, which, uh, I like quite a bit. And as we progress through the course and I show you guys better ways of doing things, you'll also find that you can instruct Claude
19:13very high level using what's called a system prompt to get even more autonomy where you want it to and then less autonomy in places that you don't. K. So what is it telling us? It's saying the app is now ready to run. Here's what I built, the today tab, the manage tab, and some data persistence. So this is currently storing locally. I just asked it to build demo, which I usually does in a local way. There's no database. There's no nothing.
19:37Now, it's actually giving us some instructions here. It's saying, hey, could you install Expo Go from the App Store or the Play Store, then run this function, and then scan the QR code with your phone's camera or the Expo Go app. You're probably like, what the hell does this mean? Well, we actually wanna get this thing live on our phones. Right? So that's what I'm gonna show you guys how to do. This demo app that they just built in order to see it, what we have to do is we have to go down to the app store.
20:00K. So in order to show you guys that, I'm just gonna use this iPhone mirroring app, you guys could see everything that I'm doing on my phone. Um, I don't think there's any way to make this any bigger, unfortunately. So just zoom in as much as you guys can and, uh, take a look at what I'm doing. First things first, we're gonna have to go, uh, app store right over here.
20:19And once I'm in the app store, I'll go search. And what I wanna do here is I wanna just type Expo Go. So now, I'm on my phone literally doing this, um, and I've already downloaded and installed Expo Go. So in my case, it'll say open, but this is the one that you want. So you're gonna install it and then that'll move us over to a page that looks something like this. If you have any recently opened apps, then, uh, they'll pop up down there. That's my little streaks app that I was showing you. K. Great. Once we have this, you do need to log in or sign up. And so I've actually already created an account here, just a Nikki Jervais. So I'm gonna give that button a quick click. And now you'll see it's actually giving you some instructions. It'll say, start a local development server with this command, n p x expo start.
20:58Now, one thing that you'll find is AI from time to time will give you instructions suggesting you have to do stuff yourself. Well, one of the highest ROI things you can start doing right now is just asking me to do it for you. It's trying to hand this off to you because of the way that it was trained. And basically, the way that it was trained is sort of like following instructions. You know, it's it's read a bunch of guides on how to do this sort of thing, and it sort of compiled all that. And so it thinks that it needs you to launch this sort of thing. It needs you to like submit this command and stuff like that. But you don't actually have to.
21:30Do this for me in a new terminal window, to me, does like 80 to 90% of the work. So what it's gonna do now is it's basically going to open up a new terminal window. Okay? It's right over here. If I zoom way in, this new terminal window here now is being managed by AI. Okay. And one thing that you're gonna see immediately is it's gonna pop up with this big sexy QR code and all we have to do in order to actually run our app now is I'm just gonna open it up on my phone. I'm gonna scan the QR code, open up the EXP link.
22:00My case, I have to enter my passcode. And now it'll jump directly over to the app. I'm just gonna run this, uh, locally here for a sec before showing you guys on the iPhone mirroring app. And then we actually have a we'll have a tracker app that is running on our on our phone. Okay. So let me just show you guys what this actually looks like by running the iPhone mirroring app again,
22:20moving that over and then connecting. There are equivalents for Android, of course. I'm just using iPhone here for simplicity. And you see we now we now have our app. Right? Now this isn't perfect. There are a couple of issues already. You can see it on the bottom. It says uncaught for promise ID one, whatever. Don't worry too much about that. Just focus on, like, the core functionality.
22:38You know, we actually have something that's working. And we have a couple of basic apps here. And, you know, it looks like when it's done, it says all done for today. And so what's really cool is this is just running on my phone. And it's running, um, basically using an emulator to show you what this would look like if it were actually, like, fully, uh, built and and live and stuff like that.
22:56Okay. So that is the the mobile development environment that we're gonna be using. Um, we're gonna be using this Expo Go sort of like QR code scan thing, and then we're just gonna be showcasing it locally right over here. Um, I don't just do it using a mirroring method like this. I'd highly recommend if you guys are actually testing this to, like, do it on the phone itself. Um, just understand that I have to do this in order for you guys to see what this would look like, um, for tutorial purposes. But what's really cool is when you do it on your phone, um, you know, you you you get to see if there are any, like, navigation or UX issues. Sometimes there are issues with, like, you, you know, I don't know, this sort of, like, pull and and drag functionality.
23:31Sometimes there's hidden functionality that you won't know, uh, where you drag to the left and the right and so on and so forth. And, uh, yeah. Anyway, I guess what I'm saying is I'd recommend just doing it on your phone. And so one thing that I'm realizing with my phone is it actually created an entirely new page called, um, create a new habit. And so here I'm capable of sort of creating my new habits and and closing them out and stuff like that. I wouldn't have known that if I didn't go on my phone. Okay. So now what we've done is we've set up both Claude code,
23:56then a mobile development environment, and we've also shown you guys how to build the testing loop onto a mobile device. From here on out, we can actually get started with the best and most exciting and enjoyable parts, the actual app development itself. Let's do it. Alright. So we've clearly seen that it's possible to build an app. Now that we know that you can do more or less anything under the sun with technology, how do you actually design like a good app? And what you'll find is in our current lovely society, uh, we can more or less do whatever the heck we want. It's actually just about taking all of that power and potential and then orienting in the right direction.
24:29In our case, for mobile app design, what good apps look like are apps that satisfy and sort of go through all five of these steps. So in general, any good app, and I'm just gonna use our habit tracker as an example, needs what's called a core function. And that is the one thing essentially that if you removed everything else from this app, the app would still be the app.
24:53Okay. Like for instance, in our habit tracker app, if you removed all of the accessory additional features away from our, you know, habit tracker app, all the cute little colors in that prior example, uh, all the different types and so on and so forth, maybe the settings page. If you stripped all of that away, the one thing that would remain, this is probably going to be a way to like create a habit and then tap on it. And every time you tap on it, it it logs it to some database. That's sort of like the core functionality.
25:19The fact that it tracks a habit. Right? Now, after we're done defining that one thing, k, what we're doing next is we're turning that one thing into a feedback loop. And so in any sort of like user experience design, any sort of a game design or anything like that, what you need is you need a cycle that maps an action to a reward. And ideally, that action and reward loop is under about thirty seconds or so.
25:45Now, obviously, this whole idea of a loop is sort of, you know, it depends on whether you're working in an with a game. Let's say, you know, if you're doing like a mobile game, for instance, the loop is usually gonna be a lot tighter. There's gonna be a lot more rewards, and it's gonna be like a lot more dopamin dopaminurgically stimulating than something like a habit tracker app or something like a calorie tracker app. But what's cool is you can still take all of those same ideas and features. Right? The fact that you perform an action and then receive some sort of reward,
26:10whatever it is that you are building. And so for instance, in our case, right, what we wanna do is every time somebody, you know, does a habit, k a k creates one and or fulfills one, we need some way of rewarding them. And usually the way that we're gonna reward them is we're gonna reward them using some sort of visual stimulus. Okay. So just because I wanna keep track of everything here, I'm just gonna move this down a bit and then I'm gonna just
26:32sort of annotate here. And I'll say the whole idea with our core function was we wanna track a habit. And then the whole idea with our core loop is we just need some sort of like stimulating reward. Okay. And variety of different ways to do this. We want like a nice sound to occur every time I tap the button for instance. We want some sort of like nice animation to occur every time I tap the button. If we do our our habit goal for certain amount of time, maybe we want cute little confetti to rain down from the the top of the screen. We just need some sort of like visual reward stimulus.
27:02Some apps go really far with us. Um, I'm using one mobile app right now called Opal, which is like a it's like an app blocker, which basically eliminates my ability to use YouTube and, you know, x and all these different social media platforms between certain hours of the day. And what I really like that they do is they will like create a little gem for you. And the more days that you block an app, the cooler and more exciting the gem gets. And at the very beginning of the day, they they're like, hey, here, you just unlocked this normal basic gem, and you're like, alright, cool, whatever. It's a normal basic gem. But a week or two in, you know, after you've been blocking it consistently for a long period of time, the gem is now super shiny. It's amethyst. It's, you know, kind of in the name opal.
27:39And I'm not sponsored by them or anything. I just really like their app. You know, it just gets cooler and cooler and cooler. So human beings were very, like, tactile creatures. Right? In general, anytime you're designing an app, you need to take advantage of that tactile nature. Um, you know, your phone has the ability to, uh, perform haptics. Right? Like vibrate, for instance, when you fulfill one of these things. Like, there are multiple ways to stack that on. But basically, what we want is, you know, user
28:04taps habit and then we want the, uh, habit to reward,
28:12k, the user. And this mechanism right over here, this can get about as complex as you want. You could add on like financial monetary rewards, their apps, and and have it. Sort of accountability partners partners now where, like, you give a certain amount of money to a friend if you miss a whatever that is. That core loop, in our case, is gonna be really simple, but you can make that as complex as you want.
28:32Okay. After that, we need accessory features. So, you know, we started with the core function, then we define the core loop of actions that the user's gonna take with the core function. Now, need some form of like accessory. So what wraps around that core loop and core function and I don't know, just adds to it. So for instance, every one of the things I'm about to say support that main loop of, you know, creating a habit,
28:55um, you know, tapping a habit essentially to fulfill it, and then sort of receiving some sort of immediate reward. Uh, well, you're probably gonna want a list of all the habits and times that you've tracked all these individual habits in the past. So for instance, when we set up our database, you're gonna need some way that, you know, a user can log the fulfillment of a habit and then, I don't know, a week later, it can still go back and see, oh, you know, on May 4, I actually logged x habit. On May 3, I actually logged y habit.
29:20Why? I don't know. I mean, that that that's valuable in and of itself. Maybe you could tie that to some sort of like visualization chart or something like that. Right? So I'm gonna say chart plus logging. That's a really cool accessory feature. You know, you should be able to customize your habits. If you think about it, not all habits are the same. Habits that occur, you know, on a daily basis just once might be sort of like a zero or one sort of habit. It's like, you either do it or you don't. But habits that, uh, I don't know, you need to do multiple times a day. Let's say have a habit of like, I wanna drink water.
29:48Maybe, you know, you count the number of cups that you drink or something like that. So we need like multi tier habits for instance. And then maybe you also want and I don't think I'm gonna add this to our specific app at least initially, but maybe you also want like a social feature. Right? What good is tracking a habit if you can't show it off a little bit? And so I'm seeing a lot of these sort of like habit tracker apps implement social functionality where you can like add your friends, you can get little notifications when the other person submits a habit or something like that. Um, so these are all just ideas and examples of accessory features that don't actually fundamentally change the core function of the core loop. But, know, they allow you to do slightly different things. They allow you to cover a little bit more ground. And it's important that your app has, you know, all all three of these.
30:29Okay. After that, I'd recommend a surface area check. So typically, when new people start developing mobile apps and really just any apps in general, they get really, really excited. And so they'll they'll instead of just do one core function, they'll do 10. And then instead of, uh, one core loops, they'll do a 100. And then instead of just a couple of accessory features, they'll do a thousand. And then before you know it, your app has like 5,000,000 pages and it's just very, very complicated. Well, in a world where you can do everything,
30:53typically, it's not about doing everything. It's about doing one specific thing fairly, really well. And the best way to facilitate that is by just making sure that your app isn't super complex. And so, you know, as part of implementing these features, we're probably gonna need a couple of different screens. Right? We're gonna need like, uh, I don't know, habit creation screen, a habit tracking screen, and so on and so forth. Um, that can be thought of as digital surface area. If that digital surface area gets too large, if there are too many paths and whatnot, the user's gonna get very confused. And so we don't we don't wanna do any of that. We wanna make sure that there's just a very simple core loop facilitated by a handful of screens.
31:25And, uh, you know, it's simple enough that the user just uses the app once. We don't need to explain it to them. We don't need to, like, basically get them a PhD in our habit tracking app in order to to to learn to use it. Uh, one run through is basically everything they need in order to onboard and know how to use our app properly. Okay. And then finally, we need some sort of retention
31:43hook. Uh, and so what I mean by retention hook is we need some form of way to create an unfinished state that the user has to come back to after a certain period of time in order to finish it. So in our case, you know, if we're doing a habit tracker app or something like that, uh, there are variety of different ways to do this. But essentially, you know, you you could have some form of challenge or something where it's like, uh, oh, hey. You know, you you join the app and then you have a three day challenge where you log a habit three days in a row. And it's sort of inherently retentive. Right? Because in order to achieve the three days, you need to go on the app three separate times over the course of a seventy two hour period.
32:17Uh, likewise, you could maybe have it so that, you know, you you start the app, you click a button, and then it actually checks in with you, let's say, a few hours later to see how your progress towards the habit is, whether you whether or not you've done the habit. Maybe, uh, the very first thing we do in an onboarding in our onboarding for a habit tracker app is it's like, create the habit, and then we'll check-in with you before you go to bed at the end of the day to make sure that you've done the habit. Then all you have to do is just tap one button and then, know, you can you can log it. Obviously, a variety of different ways to take it there, but the whole idea is, like, you don't just build an app so that people use it once and then uninstall it. Right? Any app that's ever trying to tell you that that's their goal is lying to you. The whole job in app development is you want people coming back to the app, and so you have to take advantage of some sort of dark patterns in user behavior, like retention in order to do it. Uh, but retention hooks are are very, very important. And so what I'm gonna do, at least to start, is I'll just do like a three day challenge.
33:08And this is gonna be, hey, can you log whatever the habit is that you wanna do? You know, drink water, uh, I don't know, do 20 push ups, I don't know, read for an hour or whatever. Can you log that every day for three days? And assuming you can, you have your app. Okay. So what we just did is at a very high level, we just designed the app. You know, it's one thing to act build it in code and whatnot, but it's another thing entirely to understand, like, why you're doing what you're doing. And so I just wanted to take a couple minutes that we were all on the same page that like that is how you design an app. You go through the core function, then you, uh, ideate the core loop, then you figure out some accessory features, you do a surface area check, make sure your surface area isn't super bloated. Then finally, you make sure you have some form of retention hook. And if you have all five of these things, you now basically have an MVP.
33:50Well, at least you have the MVP that you can give to Claude to have it turn into the actual thing. You have like a scope. Okay? So what I'm gonna do now is I'm gonna take everything that I just talked about and I'm just gonna plug it into Claude code, obviously in text. And then, uh, we're gonna take the little fledgling apps that I developed and then turn it into something that actually, uh, abides by all all five of these core features. The very first thing I'm gonna do is I'm gonna head back to our little Claude code window inside of anti gravity. And then I'm just gonna go slash and then I n I t.
34:18Now the reason why you go slash I n I t after you build out like a brief little demo of the app is basically this is a set of instructions that teaches Claude every time it's initialized what the app is without it having to go through every single file on its own. And so for instance, what this just wrote, if I actually go down to the Claude dot m d, which is the system file. Okay. This is where it's actually storing all that information,
34:43is it's saying that this file provides guidance to Claude code when working with code in this repository. Here is the architecture of our app. Here's the theme. Here's the state. Here's the path. Here's everything that you need in order to basically run it. And so the value there is you basically just eliminate, um, a couple of tokens, you're not actually spending as much money because most of time you're billed by token or your token usage consumes your plan.
35:03And then it also just knows where all the files are. Okay? So after you create your Cloud NMD, then you can just go back slash clear. You'll see this little token meter on the right hand side will go back to basically nothing. And then we can continue with, um, you know, actually having it design this app and make it better. And so what I'm gonna do is I'm going to build the app according to the specifications that I'm talking about. And then just to make my life way easier, instead of me writing all this stuff out just in the chat with my fingers, I'm just gonna use my voice. And I'm using a voice transcription tool called Aqua right at the moment, which is where I can basically just talk into my mic and then it'll, uh, you know, record a bunch of text.
35:36So that's what just happened and you can see that it just pumped pumped it right in there. What I'm gonna do is I'm gonna go back here and then I'm just gonna discuss my app with Claude. Hey. So I really like the app as it stands, but I'd like to level this up with an app design framework that, you know, high quality app devs and designers use. Where essentially, every app that I build requires a core function,
35:58then a core loop, some accessory features, surface area check to minimize the number of screens, and then some sort of retention hook. So the core function for this app is it needs to be able to create and then track habits. The core loop for this app is basically every time a person
36:14creates a habit and then tracks it, they need to be rewarded in some way. It needs to be visually stimulating. There needs to be some form of haptic feedback and then ideally, there's some sort of sound like a like a chime or something. Also, we need some form of challenge. So, you know, if they're embarking on a three day habit challenge, let's say, which might occur immediately after onboarding,
36:33at the end of that three day challenge, we also need to reward them for the fulfillment of their efforts. The accessory features for this app are gonna be something like logging. So the user should be able to see all of their prior habits tracked, some sort of, you know, accountability
36:49things so that they can look back and then maybe see a graph or a chart of just how consistent they've been. And then ideally, need a way to create multiple types of habits, not just one. Being aware that, you know, a habit where you log it once per day is different from a volume based habit where you need to maybe do it three or four times a day. For surface area check, just make sure that we don't have more than somewhere between five to seven screens in our app. We want it to be as simple as possible.
37:16And then in terms of retention hook, the thing that brings people back to the app, we want to create challenges for the user and basically have some sort of ongoing thing that checks in with them via push notifications, probably once a day or maybe a couple times a day. Um, just consistently knocking on their door, seeing whether or not they've done the habit, whether they're ready to start the habit or or hey, you know, don't forget about x y z habit, uh, whose intention you set earlier today.
37:43Uh, stuff like this just gets people coming back to our app and is ultimately responsible for a fair amount of our usage. Okay. So I just said a giant wall of text and because I did, it's not actually gonna paste all of that text directly in like verbatim. You're not gonna be able to see it. Instead, it's just gonna say pasted text number one plus eight lines. So what I'm gonna do is I have this whole thing here. If I press enter, it'll now populate.
38:06And now, that I've given it both the framework and also every little step in that graph, I'm gonna have it actually implement and and add things to the app that we built earlier. Just that simple little tracker. One more thing I'm gonna do is instead of doing all of the testing and demoing on my phone like I was doing earlier, because the iPhone mirroring app just can't get any bigger, we're gonna be doing this inside of Chrome directly. The functionality is gonna be the same, but it'll also just allow me to zoom way more in and then have you guys actually be able to see the thing. Um, but as a final check, I'm gonna be going back through my phone using the expo setup that we talked about earlier. And that's important just because if you can't actually physically,
38:42you know, play with the haptics, we can't hear the chime come out of the phone and stuff like that, you're not really getting the whole experience. Okay. And this just thought for a minute and twenty nine seconds here, and then it got back to me saying, here's how I'd map your framework onto the current app. So six screens in total. There'll be an onboarding. There'll be, uh, first launch flow, which will pick three habits for you and then start a three day challenge.
39:03Today, which is a daily checklist, that's that core loop that we talked about. History, which will be a calendar slash graph view of all of our past completions, and then some sort of consistency chart. A manage button, which is where you can do all of the stuff like adding, removing a habit, configuring the type, and so on and so forth. Uh, a challenge, which is where you can see the challenges that you're currently enrolled in. And finally, some little settings, which is where you can set your notification preferences, your theme, and so on and so forth. We'll do push notice, uh, on that. Okay. And then as things get better and better, you'll actually enhance the core loop. So you'll go haptics,
39:38then you'll do sound, and then you'll also go visual as well with a little confetti particle burst on completion using this library called reanimated. You know, if I was a crazy cracked out app dev and I was looking at this stuff, maybe I'd say, no, don't want you to use the expo AV library. I want you to use this other library. Or I don't like reanimated, I like this other thing. Or, you know, confetti particle bursts are very CPU heavy, they're not like ideal, so let's not use them. But we're just getting up and running at this point, so I'm I'm not gonna be very opinionated in all the things that I want us to do. I just wanna show you guys proof of concept. You can get pretty far without,
40:07you know, without actually having to worry too much about every individual step. And so what it's done here is it said, hey, Nick. This is a substantial build. I wanna tackle it in a bunch of phases. But just like I talked to you about earlier, you know, Claude is gonna try and conserve both tokens and then also just like it's not gonna try really hard or at least as hard as it realistically can in every scenario. So what I'll always do when it presents me a situation like this is I say, no, I just want you to do the whole thing. So that's what I'm gonna do here. I'd like us to do all of it including phase one through four.
40:37Once done, open in Chrome, not Expo, so I can test locally. Okay. So I'm just gonna send that in and then we'll see where it goes. Alright. And then spent something like five minutes thinking and then opened a couple of Google Chrome tabs. You'll find that it'll do stuff like this just as part of its own internal testing loop from time to time. We can expedite that as well by installing a specific library, which I'll run you guys through later as we get a little bit more complex with our app. But if I go to Google Chrome here, you'll see that we now have this tab open, local host eight zero eight one. And so anytime you're designing or developing any sort of app, um, you will always usually open up a a local server of some sort. Don't worry too much about it on like a technical POV.
41:17What we're doing is we're just like starting up a server to host our app on the back end. And so you could see if I just zoom in here to make it really easy that we we're actually already getting started with the app. Um, it hasn't actually gone through and built the functionality yet. Think it's just, like, scaffolded a couple of pages. And, obviously, there are a couple of issues, like the text here is invisible. But, you know, if I give this a click, you can see that we we actually have, like the apps right here. So initially, it's saying, hey, choose your habits, exercise,
41:40meditate, and then drink water eight times a day. Then it's going to invite us into a three day challenge with that little button that's still screwed up. And then, k, I'm just gonna make this a little smaller. And then, let me just make it look like an actual mobile app would realistically. You could see that we now have sort of
42:01these three bottom tabs as well. Okay. So here's sort of the three day kick start. K. We're zero out of three days right now. In order to drink water, every time I click this button I don't think you guys can hear this yet, so let me move this. Let me just uncheck the audio. You guys can now hear this little like
42:17chime slash beeping noise, ideally. I don't know. Like hopefully, you can. And then once you're done, once you make it to all eight, we now have one of three complete. Same thing with this meditate, same thing with this exercise, but then you obviously have like that cute little chime with something saying all done for today. K. And then we can also uncheck,
42:35which is an important part of the core loop as well. I'm sure you guys could see, but there are probably some situations in which like you can't you know, you don't actually wanna remain a habit or maybe you logged it by mistake, you're fat funded or something, whatever. So that's the today page, it looks pretty good. The history page over here is where you can see the long running streaks, which is nice. So here's an activity graph. I don't actually have any activity because, you know, I just started with this stuff. Kinda curious, if I go back here and I log
42:58my habits Okay. And you can see the activity graph has actually popped up there, which is quite nice. Looks like there's also a consistency chart which logs the consistency on a seven day basis of how far you've gone with exercising, meditating, and let me just tap through all of this. So it gets to eight and then also drinking water and it looks like it's at 3%.
43:17And there's also a manage a habit button. And I'm just highlighting this so that could see the text underneath. This is obviously a bug that we're gonna have to fix, but you could see you can select a daily habit or a count style habit. I don't know. I want a sleep habit, let's say. Okay. And this is going to be a daily habit sleep before,
43:35I don't know, let's say 9PM. And then we'll do a daily reminder, Reminder at 9AM, it looks like.
43:43Um, and then I'll press enter, and then now it looks like we have a sleep before 9PM habit. If I go back here, we can we can also tap that, which is kinda cool. Awesome. So I mean, like, this is more or less everything that I'm going for. In order to test the full three day kick start, we're probably gonna have to, like, accelerate that somewhat and build in, uh, our little, like, testing feature loops that we could see, you know, like, this is one day, this is another day, this is another day. When all those three days hit, like, what's what sort of animation is gonna appear? How how are we gonna track that, um, long term? But I would say this probably has most of the functionality gap that I want.
44:15Um, obviously, there are just a couple of issues, like the fact that the text is the same color and, uh, the fact that this reminder here is like, can't change this just as daily at 9AM. So what I'm gonna do is I'm gonna do the same thing I just did a moment ago, where, uh, I just use a voice transcription tool like TalkCloud through my app. Uh, it's just this time, I'm going to change the, you know, make minor changes wherever appropriate. We're not actually building the whole thing now.
44:38Excellent job. This looks fantastic. The first thing I wanna change is I need some sort of testing view for a developer so that I can modify the day of the challenge or at least trigger the event that occurs when we hit, let's say, three days out of the three day kick start. Right now, I just sort of have to trust that it's working, but I'd like to ideally really have it work. The second major issue is right now, the font color that you're using is the same as the background color for a lot of these icons.
45:06Uh, the check mark icon, for instance, is invisible because of that. A lot of the text in the, um, history and then manage pages is also invisible. Um, there's also no way right now to create your own challenge, which is unfortunate. We just sort of have to to go based off of the the preexisting challenges. I'd like us to be able to do that. Also, double check the stats. Right now, I'm seeing exercise is 3% checked, for instance, after one day of doing it. Mathematically,
45:33it doesn't look like a seven day challenge. It looks like a thirty day challenge, but, uh, on the consistency and it's saying, uh, seven days. Some of the, uh, text kind of rolls or wraps over on the history page. For instance, the current streak, the best streak,
45:49um, just because the text itself is a little bit longer. You know, on mobile, it's most likely gonna wrap. And then when it wraps, it's also left aligned, which I think just looks kinda weird. It doesn't look as good as it probably could. And then on the manage page, um, I like all the icons. Everything there is really cute, but the, um, habit type selectors have the same font color problem. Same thing with the habit name. So I think that's just a widespread issue.
46:13Finally, at the very bottom, you have the ability to set a daily reminder, which I think is valuable, but, uh, we would want to be able to customize the the date and time of the reminder. And also, ideally, we wanna be able to specify different reminder times for different apps, uh, habits rather. Right now, we only have one reminder time, 9AM across all of our apps. And that'll help with, uh, you know, having the user have more control over when they wanna be notified.
46:37Aside from that, I liked our onboarding. Um, I think we could do with one more screen that just very clearly explains how the app works. The core functionality is you can create an app and then you can track it, uh, you know, hit milestones and kick starts and then track your progress, and then use push notifications so that, you know, if you want to be reminded in a particular point in time to assist you,
46:59you can. I'd say that's probably the 8020. Okay. With all that in mind, go through everything top to bottom, implement those changes, and then just open it up in another Chrome tab. I'll, uh, I'll test it. I'm now just gonna dump that in and then cut to whenever it's done with all of its changes. Okay. After a couple of modifications, just making this more visible for you guys. You could see that it's opened a new tab. It's done those font color fixes, the stat card fixes, the per habit reminders,
47:24custom challenge creation, and then it's also done some developer tool stuff for us, which is going to enable us to test the app like I was talking about. So just opening this back up in this window here, we could see we now have a better onboarding screen. So here's how it works. We create habits, add daily check ins or counted goals, like drinking eight glasses of water, take challenges, push yourself with three, seven, or thirty day streaks, track progress, see your streaks, consistency charts, and activity history,
47:48stay on track, set personalized reminders for each habit at the time that works for you. I see it's implemented a skip button. Uh, I think it did this as a developer just for me. So what I'll do here is I'll say read, uh, walk, and then, I don't know, exercise, let's say. Actually, why don't we do, um, healthy meal? That way, we test two different types.
48:06Now, we're gonna start this three day challenge. Complete all your habits for three days to earn your first achievement. Ready? Start the challenge. And now we actually have this three day kickstart just as we did before. I'm realizing that I don't think you guys could actually hear my, uh, chime before, but rest assured this thing is chiming. Uh, it's actually very delightful. And then when it goes all done for today, we we still have that confetti, which is nice. And I could trigger it over and over and over again because I am addicted to that paper, baby.
48:30Alright. So going to history here, it looks like we minimized the streak, best thirty day average. Now, sort of exists all in one line, which is quite nice. We also have obviously eliminated the font issues, and then we've, uh, implemented some brief tracking for per habit consistency. You can see here, we have 14% of the seven day, which makes sense because we're done one seventh,
48:49and there's a 3% of thirty day as well. And this updates too, which is nice. Under manage, we still have those icons. I think we should probably add some functionality not just to use these basic icons, but as you guys see, it's already better than like a, you know, over the the counter basically habit tracker app despite the fact that visually it may not be as interesting. And then I'm actually just gonna write morning run.
49:10K. And then you could see there's also the ability to create a counted habit with, I don't know, five, let's say. Cool. Both of these are pills for some reason. We have the challenges that they're connected to. But now on the right hand side, we have this little chime, which is cool. So I'm gonna go chime and I'll say, hey, want you to remind me every day
49:28at, uh, I don't know, let's just do 12PM, let's say. Now, ideally, we'd have a little bit more like feedback here to set, uh, that morning run. I'm noticing that we don't have that, so I'm gonna probably wanna change that. Then down over here, have simulate full challenge completion, force complete challenge, reset onboarding, clear all data. So this is basically like how we reset it from scratch.
49:47So I'm just gonna pretend that we're now done our three day kickstart challenge. K. Cool. And you can see we have the beautiful crown, a little trophy, and then three day kickstart, one day is completed, three habits track continue. And now, it jumps us over to the create a new challenge section.
50:03So I don't know, new challenge. And then we want these habits. We're gonna start the challenge. We're now basically doing another one. If I go back to today, you could see the new challenge is sort of up at the top. Alright. That looks pretty reasonable. I like this. I think I think there are just some weird issues with the editing of that, like some of the buttons and and check marks are kind of odd. And then I want this to be a little bit clear. So what I think I'm gonna do is I'm just gonna do our last major change.
50:29You know, once we're done with this last major change sorry, I think that's the way the app's supposed to look. I'm actually just gonna like try try running it live then on my phone. I'll show you guys that. And then after we're done with that, we'll, uh, actually push it out so that, know, I can use it, uh, a little bit broader. And then we'll consistently add functionality to it like databases and so on and so forth to turn it into something that you can actually get on the App Store. So taking a look at the app
50:50a third time, the new challenge section at the top of the today page looks to be indented a little weirdly. There may be a div behind it. There may be an element or something like a box, but I can't see it. The background color might be the same. So just fix that. Everything else on this page looks pretty good.
51:09I don't see any major issues. Oh, uh, some of the counted habits look strange.
51:16For instance, healthy meal, which is, uh, one of the defaults, has a three out of three under it. But because it's underneath it and the icon to the left is centered,
51:29uh, it looks strange compared to the rest of the habits. So I'd like you to to fix that. Just have a layout where everything's just on one line. History looks pretty good. I think the cards at the top of the page, the three for streak best and seven day average, they're just a little tight vertically, so just add a little bit more vertical spacing between the emojis, the numbers, and then the, uh, descriptor.
51:54And then on the manage page, uh, add five more icons, so we should have one more row. And then for the
52:03placeholder text morning run, capitalize the r. And then for the reminders, right now, there's no way to confirm the reminder. I think the user won't know whether or not the reminders are set for specific times unless we have a confirmation button.
52:19It also looks like the reminder div or section
52:25cuts off strangely, I think because the borders aren't around it. Um, just find a way to combine all of that so that it's seamless and and fluid. And then I think the way that the new challenge edit section is right now is it's using some weird check boxes. It almost looks like it's an unfinished product or maybe the styles haven't applied. So just double double click on that when you have a chance. And I'd say that's probably the 8020.
52:51So I'm gonna give it another couple minutes and then circle back, then we can work on the next step. I made a couple of additional minor adjustments. It generated 17 icons for instance, instead of 15, and I just wanted five per row. Spilled kinda weirdly. And then, made another one up here where the set button didn't do anything. But with all of that done now, I'm gonna go back to the app and we can do a full run through basically by resetting the onboarding.
53:15Okay. So build better habits, get started. You can see we have the how it works section here, the continue. I'm gonna go exercise, drink water and then walk and then I'm gonna start that challenge. Just gonna tap all of these so that they they hit the the numbers. So this is gonna be eight and that other two are gonna be done. We also have a nice little border around this new challenge now, which looks a lot sexier.
53:36This is now a little more vertically spaced out, which is nice and then we have those habits, which are correct. Under manage here, you can see we have a bunch of new icons like coffee and stuff like that. So I don't know, maybe we want coffee. And then let me just test this out. It looks like we have the reminder feature. K. Although the remind at is spilling over into two lines, is kind of annoying, so I may fix that. But anyway, we could set whatever time we want the reminder. And then when we set it, we can see that it's now been permanently fixed. It's now 5AM,
54:03basically. And it looks like the UX is if I tap it again, the reminder turns off. And then if I tap it again, it turns on. So this one's reminder. Uh, this one here, I don't know, maybe you want like a 9AM reminder. For this one here, maybe you want like a twelve. Okay. So all of that is working functionally, which is quite nice. And then I'm just going to clear all data. We're going to start from scratch and see if there's any change whatsoever.
54:26That looks pretty good to me. And then I'm just going to go down here, simulating the full challenge completion and then forcing the complete challenge. Cool. Awesome. And as you can see here, they flesh this out a little more. This looked a little poor before. But now we have a three day, seven day, fourteen day, thirty day, sleep eight hours, healthy meal, and journal. And we can name it something and then go ASDF is our current challenge.
54:48So that looks great, but it's still on the computer. And in order to really know whether or not this app works the way that I want it to work, what I'm gonna do next, I'm gonna run this on my phone. How do you do it on your phone? Well, we need to start one of those expo servers and then actually gonna, you know, do it on my phone and then I'm gonna like pay attention to haptic feedback and and stuff like that.
55:06So what I'm gonna say is start an expo server for this in a new terminal window. And it's important to see a new terminal window because if it does so locally here, you'll find that you can't actually take the QR code sort of a flow. So what I'm gonna do here it looks like it misunderstood me here when I say expo server.
55:25When I say expo server, I mean to run it on my phone, um, in a terminal so I could see the QR code. And once I have that, I'm just gonna open up my camera here just to get it all nice and ready. K. And you can see it's right over here. So I'm just gonna make this way bigger.
55:42And this is the same thing that we had earlier, so I can now just open it in Expogo on my telephone, telephone. And then it'll go through that whole build process.
55:53Now what you'll find is it's different to run something locally on your computer versus here. And so what's just occurred, just to show you guys here, be 100%, uh, real, is there's a line down at the bottom that basically just says uncaught in promise ID.
56:09And so basically, what that means is there's some issue with the server. And you can see when I tried reaching it, we ran into a problem here as well, where there's some sort of issue with the get item or something like that. When this occurs, just copy over all of the error messages. K. Paste it into clot. So I just did that. And now you're seeing it's saying the async storage v three isn't compatible with Expo Go. We're gonna download v 2.2
56:33o or something like that. Okay? So what I'm gonna do now is I'm gonna go back to our terminal window. Okay. And I'm just gonna exit out of it. On a Mac, you do so by holding control and pressing c. That's how you exit. Then And what you can do is you can always just like go up to see the last terminal command. So I'm actually just gonna clear everything and then I'll just go up to do the last terminal command. It should rerun the app for me. Okay?
56:53Okay. So now what I'm gonna do is I'm going to open up my camera again and then I'll do the same thing. So now opening it in Expo Go. And as you can see here, there's no there's no errors,
57:06know, in the log. I actually have like to build better habits right here. So I'm just doing it on my phone. I'm gonna open up the iPhone mirroring app, which I believe I mentioned is unfortunately quite small. So you'll have to deal with said iPhone mirroring app being small, just kinda how it is. But as you can see, we actually have the app running locally, which is quite nice. So continue.
57:26And this is the same thing that we had before. It just looks like some of these icons are a little bit cut off at the head. It's kind of odd. I'm just gonna make a note of that here before I forget. Let me just say, great stuff, but the icons are cut off around halfway through vertically. It's like the heads
57:42are cut off or something. Okay. I'm gonna go back here, click continue. And yeah, we see the same issue with all of the icons, so it's probably just a persistent problem. It also looks like there's not a lot of visual space up top. For those of you guys that can't see the, uh, time is basically immediately overlaying the the date. Also,
58:00there's no vertical space. Add some sort of padding up at the top to accommodate for the fact that the iPhone has its own little bar.
58:11The black oh, what's this one called? The black middle window and then the battery time
58:19e t c. And And I'm just gonna keep all that here as I continue going through the app. Awesome. We're getting some great notifications and like awesome sounds as this thing comes in, which is beautiful. Oh, and I really like that animation. That's nice. Then we're going to the history. We could see the dates and times are all good. Basically, we're doing is we're just retesting this. It's just we're doing it on my phone.
58:41Cool. So we have an example habit. And now, this is really cool. This didn't occur locally, obviously, because we didn't have push. But, um, now you can see it's saying Expedgo would like to send you a notice. So we're not actually gonna get the notification prompt until we click that little button, which is awesome. Uh, which means it's gonna be lower friction on the user POV.
58:59And then, you know, naturally, most people are gonna wanna set some sort of reminder at some point. So we'll allow it now, and now we can go through and say, hey, wanna set it for twelve, which is pretty great. Okay? And, uh, yeah. And I'm gonna say force complete challenge, just to make sure that works. That's great. One day completed, three habits tracked. Awesome.
59:16And now, uh, we could set sort of our own Great new challenge, healthy meal and then start challenge. Awesome. And the final test through run is it's one thing to do it here, like in front of you guys. It's another thing to do it on the phone itself. And that's important because if you think about it, the way that you use a phone, it's a little bit different from the way you use a computer. Like computer, you have a mouse and so the mouse can sort of equally touch
59:40everything on the page. But me as a user, I'm I'm gonna be mostly using my thumb. So it's actually important that most of the major functionalities are within thumb's reach. There are other minor UX things as well to check, like, wanna you wanna make sure that the thing scrolls the way that you expect it to. Uh, you know, there's additional functionality like long press on things.
59:58And, uh, you know, this is stuff that, like, you can't just get if you're doing things entirely through a code on your computer. You sort of have to play around with it a bit. So I'm just gonna play around with the app a bit and I'll make any additional minor changes I have to. I really like this. I would say this is the 8020 and it's already significantly better habit tracking app than most of what is currently on the market. And it's pretty funny because I think I managed to do all this for maybe 50% of my Claude usage, uh, for this, uh, session, which is like every couple of hours.
1:00:24So that's pretty crazy. Right? It's a $20 a month subscription. I was able to build a better app than 90% of what is currently available on the App Store. And I was able to do it, you know, entirely myself. Just gonna close out of this. I'm gonna push these changes, do another double check, and then we're done with our first version of the app. Okay. Once you've gotten the app to a place where you like it, um, there are a couple things that you should do. The first thing you should do is you should update that claud.md
1:00:48again. And the reason why is because this app is no longer just like that that beta version. This is, you know, like a full fledged MVP. It has a lot of functionality in it. And the next time you change things or edit it, this claud dot md, which provides all of, the base information and is immediately loaded into every conversation that you have with Claude, um, should describe, like, all of the the additional functionality.
1:01:07The second thing you should do is you should push this to GitHub. For those of you guys that don't know, GitHub is a version control platform, which is basically a fancy way of saying it's like a place for you to store your code on the Internet. And the reason why it's valuable, at least for app developers, which I guess you are now attempting to become a part of said class,
1:01:26is because it doesn't just store the code. It also stores any changes that you've made to the code. And turns out that's pretty valuable because when you have AI, you know, doing whatever the heck it wants in your code base, if you don't have some sort of, like, accountable way to revert back to the previous instance, let's say you have an awesome thing going, you make a couple changes, the app breaks, and you're like, what the hell? How do I fix this? If you don't have an easy way just to roll that back and then share those rolled back updates with other developers and the team, you know, you can you can wind up in in quite a pickle.
1:01:51And so if you don't already have a get GitHub account, it's pretty easy to do. All you need to do is just enter your email address right over here. So I'm gonna assume that you've done so. You've signed up. Uh, they might ask for your phone number or maybe your email address, uh, double verification or or something like that. They tend to be pretty secure. And then once you have it, um, you can literally just go right over here and then just say, great. Create a GitHub repo for this
1:02:13and, uh, as well as a read me, then push. Now, if you're not logged in to GitHub here, it'll ask you to basically do authentication and then connect. That'll open up a little page for you and then it'll like, you know, have you re log in again. Um, once you're done, what this will do is this will just push this to that that database online, that sort of version controlled resource.
1:02:35Okay. So it's doing it right over here. Uh, and you can see it actually called it example project, and I'm realizing I don't actually want it to be called example project. I just created that for you guys. Um, rename it to habit tracker and, uh, rename this folder as well.
1:02:51And that way, uh, you know, we'll actually know what the heck's going on. Always important to name things. Once done, you'll have the same thing, um, inside of the, uh, a folder on the left hand side. And if you don't like this example project, like I don't, I can already tell it's starting to get annoying. I'm just gonna open folder and I'll just go directly to habit tracker and then don't save.
1:03:09And now you can see this, uh, window is opened. It will have reverted our session though, so just keep that in mind. You won't be in the same session. Then if you go to your GitHub,
1:03:21I'm just gonna go habit tracker, see if I could find it. I see one that's capitalized here. It's probably it. Yep. That's one from two minutes ago. You'll actually see all the code written on the page. So just making this really clear to you. Claude always likes adding itself as, uh, you know, one of the the collaborators on any project now, which I find hilarious.
1:03:39So it's two people and Nick Sariaf. So it's GitHub. It's Claude and it's Nick. Nick's doing the heavy lifting though. Trust me. Um, and scrolling down, you can see that two minutes ago, we actually added all these these changes alongside our habit tracker app. So it's still calling an example project, which is kind of annoying. You can click here and then, um, edit that at any point in time. You know, a couple additional prompts and it probably would have done so just fine. So I'm just gonna click commit. And by doing so, what we have now is we have, like, the updated version of this app, and, uh, it actually just stored that change directly to this file read me. And, you know, don't worry too much about all the tiny little specifics here, the description of the change, the time of the change, specific files. But, uh, just know that you basically now have this online.
1:04:17Value there is you can share it with your team. And then as mentioned, if there are any issues, you can roll it back at any point in time, which is quite cool. Okay. So what do we have now? We have an app that is running and capable of running locally on my computer. It's also capable of running on my phone using Expo.
1:04:34K. We can't actually run it on our phone, like on the App Store yet until we push it out and actually get it running. So just keep that in mind. Now the issue with this is all of the data is currently stored on our phones and our computers. So when I run it on my computer, for instance, as you guys saw a moment ago, um, you know, it's like storing that data directly on my computer. If I sent the app to somebody else, I wouldn't be able to use that app. Um, on my phone, you know, it's running locally on my phone insofar that all the data that is creating the preferences of the apps and the habits and stuff like that that I'm I'm generating, they're actually just stored on my phone in in in like a little memory feature.
1:05:05We have to do if we really wanna truly, like, internationalize and and and allow our app to be used by a bunch of other people, and then also allow, like, persistent storage that doesn't depend on the device so that if I download it on my phone and on my computer, we're both gonna be, like, pulling the same data, is I need some sort of database. And a database, for anybody unaware, is just very similar to your hard drive. It's just being hosted elsewhere.
1:05:26Because it's being hosted elsewhere, you need a way to talk to it. And so that's where languages like SQL and a bunch of other programming jargon and stuff like that come in handy. What's really cool is with AI and a couple of simple solutions, you can now communicate with these databases and set everything up almost completely autonomously. Back in the day when I was starting developing apps and I developed my first one for,
1:05:46uh, One Second Copy, which is a company that I ran. We scaled over $90,000 a month. Um, basically, AI generating articles for people. Designing the simplest thing on planet Earth, much simpler than what I just showed you here, took me like three weeks because a good two and a half of it was me just fiddling with the database, setting up my SQL schema and all that. Now, we can do so in literally, like, thirty seconds. And that's what I'm gonna show you guys next. Taking this habit tracker and adding a database functionality to the back end. And once we're done with that, I'll weave in a little bit of AI functionality just to really complete the circle. And then we'll actually push this puppy out to the App Store, as well as go over some other apps that you could build that are increasingly exciting.
1:06:23Alright. So now that we have the app working, right, we verified the core functionality, it's time to take it from local storage, aka storing all of the data on the same device that we are building on, to cloud storage, which in our case is gonna be storing the data on a date in a database. And the database that we're gonna use in particular for this app is called Supabase.
1:06:43I want you guys to know that there's, a million different databases you can use, and my stack here is rather opinionated. I just use the stack because I have built many apps on the stack myself. And typically, what goes on when you end up, uh, building a lot of apps is you just kind of arrive at one specific stack or set of tools that works pretty well out of the box, and then you just stick with it. And then it's a self fulfilling prophecy. Right? It's not necessarily that it's the best stack ever, but you just know how to use it. So to you, it's easier. And then you get, you know, you of, uh, the stack over and over and over and over again, and then you end up just not really wanting to use anything else.
1:07:15So feel free to apply the same idea here that I'm about to show you guys to, like, databases in general. You don't have to stick with the one that I'm gonna show you guys how to But, uh, I really like the one that I'm showing you how to use and a lot of other five coders and app developers and stuff like that nowadays make use of it as well. Okay. So just zooming in a bit here. Um, the specific platform we're gonna use is called Supabase.
1:07:34Now instead of storing everything, you know, inside of the local storage or whatever, when you use a database, there's sort of two things that go on. And I don't know where I put my pen, so give me a sec. I'm gonna go find it. Okay. Have no idea why that was in my kitchen, but it was. Uh, so basically, what we have right now, you think about it logically, is we have,
1:07:51you know, sort of our app over here on the left hand side. And basically, what the app does at the moment is it communicates, okay, with whatever the device is. And so in our case, this device,
1:08:03you know, if I'm running it locally here, uh, on my computer, it'll be on my computer. Um, or, you know, if I'm running it on my phone, it'll be on my phone. And basically, just like, you know, you have a little hard disk with, like, memory and stuff like that or a little USB key or something, all of this data is partitioned, and then you can you can send and request, and the computer keeps track of which area the the data is. And, you know, it's sort of seamless.
1:08:22However, this is just local storage. What we need to do now is we need to go one step further. And basically, what's gonna happen is our app, k, is gonna send and receive data to our device, and then our device is also gonna send and receive data to a database, which, in my case, I'm just gonna call cloud storage. And this is gonna be like our our DB.
1:08:42And our DB here is gonna be called Supabase. Now the issue with a structure like this is the second that you add that additional layer, you need to tie the specific user of the app with a specific table or a specific section of the database. And so it's not enough just to add a database on its own. What I mean by this is you can't just add the database and then have everything work the same. You also need to add some sort of user functionality.
1:09:07So the database needs to be able to pull records for a specific user. Like, they need to know that it's Nick's data, for instance, versus another user's data. And so, actually, what we're gonna do on top of our app is we're also gonna add, um, basically, some sort of, like, login functionality. There's gonna be, like, a little screen here which has, like, you know, username and password.
1:09:24Um, and then what we can do is, you know, our app, we can use to log in. That login data is then gonna go to our database, pull and basically verify that, like, okay, that user is the right user. Um, and then we can use the app as usual, shuttling data to and from our device and then ultimately our our cloud storage for, you know, updates and stuff like that. And a structure like this is typically the most efficient simply because you get to take advantage of, like, local on device caching, which allows your data load load instantly,
1:09:49um, but then also, uh, you know, like updating from the database periodically. And so this is more or less what it is that, uh, we're gonna build. And the good news is you don't actually have to know anything about databases or authentication or anything like that anymore. You could just have Claude do most of it for you, assuming that you're using a provider that handles it all like Supabase. In in my case, Supabase handles both the auth and and the login.
1:10:08So what I'm gonna say is, I'd like to add a database to this project, and, uh, I'm just gonna use my voice transcription tool. In addition to a database, I also want local caching, so the user has very immediate and snappy experience when they use the app. We're gonna be using Supabase as our app. And in addition, we're going to need to set up user authentication so that you know which user is accessing which data. Help me through this process.
1:10:34And as you can see, could just ask the model for help. It's not that big of a Um, but, basically, what it's gonna do now is it's gonna change our database, which is likely currently stored somewhere, I imagine, inside of our apps folder or maybe, uh, I don't know, one of these folders here. Uh, and then it's gonna replace that specific thing with, an API call, which is basically a request to, uh, on a service outside of our app. And because we're now extending beyond the bounds of our initial device,
1:10:58uh, you know, the the the system needs to look a little bit different as well. We also need some cool features like security features to ensure, uh, that, you know, other people don't use my username, let's say, to log in and access my data unless that's something that, you know, I I specifically allow them to do, you know, bake it in or give them my my credentials.
1:11:15And so we don't need to worry too much about knowing sort of all the different ways that you can do things. Um, just ask Claude for help. Review it. Make sure it makes sense for what it is that you're trying to do. Assuming that it does, you can move forward. Here's what Claude just told me how to do. The proposed architecture is super base for auth, which is email password and OAuth. Those of you guys that don't know OAuth just means being able to log in with a social provider like, let's say, Google. So I could do a one click sign in with Google, and then I could sign in to my app that'll identify and authenticate me.
1:11:40Now then it's gonna say Postgres database for habits, completions, and challenges. That's just built into Supabase. You don't need to worry about it. We have local first caching, which is what I was alluding to. So we're gonna keep async storage as the immediate read write layer, so the app feels instant. The idea is we wanna be we want us to be really snappy. If you have to like write read and write to a database every single time you make a change, usually, there's like a little bit of a lag there. It might be a few seconds, could be, you know, just milliseconds, but it's still like a little bit of a delayed experience for the user. And I also don't wanna add any load time initially. So what's gonna happen is we're gonna cache all the data locally, so we're still gonna have that layer. We're just gonna add the database and periodically sync.
1:12:15Okay. So then we're gonna replace the current onboarding only gate screen with a Supabase authentication screen that involves sign up and sign in, and then we're gonna onboard, uh, for new users as well. Now it's also asking for preference on auth methods. Email and password is simplest to start, but Supabase also supports Google, Apple, GitHub, OAuth out of the box. Then it also, uh, is gonna run me through the the process of installing Supabase.
1:12:36So I'm gonna say, I don't yet have Supabase set up, but I'll do that now. Let's go with email and password. Work on everything that you can, uh, up until that point. Cool. And what's really interesting here is, you know, I'm acknowledging that I don't have the step that it asked me to have. Instead, I'm saying, gonna do that as you do the rest of your work. And so I'm just paralyzing. I'm batching a little bit. So how do we actually go about this process? Uh, it's pretty straightforward. So I'm just gonna open up my little habit tracker app here, then I'm gonna go Supabase.
1:13:03K. Let me just make this big. And as you can see, Supabase here is, uh, just like any other app, you've got a login screen and and stuff like that. In my case, I'm already logged in. Now what you have to do if you wanna log in is just, you know, create an account. It's totally free. You can then start a project, um, after which you'll have a page that looks like this. So I'm gonna click to start a project page. K. And I just deleted all my projects here so you guys could see them for yourself. I think what I'll do is let's go to nickjwellsorg.
1:13:27And here you can set a project name, which I'm just gonna call habit tracker app. And then you can also do a database password right over here. So I'm just gonna add my own little database password. And, uh, looks like it's saying my password must be harder to guess. So there you go. Just gonna make it a little bit longer. Okay. So now that we have the database password and then the region,
1:13:48uh, we can enable the data API automatically expose new tables. And then there's one more thing you have to do. Down over here where it says, enable automatic RLS, just check that button. That's pretty important. And then you just give it a click just like that. And now, uh, it's basically gonna go through the process of creating the database for us. And once it creates the database, we'll have a bunch of information that we can send back to Claude. So that's what we're doing right now. I'm just gonna save this, and it looks like it's setting it up somewhere in Oregon, which is nice. The location of your database is is pretty important because the further away it is from where users are gonna be using your app, the more lag involved.
1:14:19Okay. Great. So as we see here, it's actually already doing the work in the back end, which is quite nice. So it's installing dependencies and stuff like that. All we really have to do here is wait for this to finish and then ask us for specific things from Supabase. And then we can actually go through and like give it like our password and our API key and stuff like that. There were three minutes in now. The status has changed slightly. It's basically going through all of the database steps. You guys can't see all of them because of my fat head, so let me make some more room.
1:14:43The database is healthy. Post g rest is healthy. Office healthy. Real time is healthy. Storage is healthy. And then finally, the edge functions are healthy. No. You don't need to know what any of this stuff means. It's all good. But basically, they're just telling us that the database is now set up and we can actually proceed with the rest of the steps. You see the first thing it's doing is it's giving us the ability to copy the project URL, publishable key, direct connection string, then some CLI setup commands. You don't know what any of this stuff is. Uh, Claude can walk you through it, but basically, are all just things that are required for it to modify or manage your super base for you without you actually having to, like, click in in all these tables.
1:15:15So going back to Claude code, you could see that it's now saying that it's it's done. It's given us all this information, and then your next steps are to create a super bay super base project at whatever. So okay. I have the super base project ready to go. Uh, I'm just gonna paste in all this information. So I'm gonna copy the project URL.
1:15:35I'm gonna copy the publishable key, and I'm also gonna copy the direct connection string. Then finally, I'll copy the CLI setup commands as well. So it's giving it literally everything that it needs in order to manage as much of this process on its own as it can. And the reason why is because,
1:15:52you know, as mentioned, Claude, lot of the time is trained off of old data where, you know, human being had to actually manually do things like run the schema. Um, a lot of the time, can just give it full access to super based data to do it for you, um, not to mention, like, other platforms as well. So that's what we're doing here. We're basically saying, hey, man. Here's all of the the stuff you need in order to do it for me. And now it's going through, and what it'll do is it'll set up that schema,
1:16:12um, using, you know, this SQL editor. And I'll show you guys what that looks like after, but, basically, this is just how you set up the database. This is how you set up the rows, the columns, the headers. It's how you know that you're gonna have like a a field called data type, let's say, and that's gonna be like habit, uh, data type name or whatever, and that's gonna be like on the morning meditation or something.
1:16:32K. So going back over here, it's saying that we need to do a Supabase login step interactively. Okay. So I'm gonna say run login script. I'll authenticate. Now if it gives you an error like it just did to me, basically saying you can't do it within your non TTY environment, that's just a byproduct of the current terminal type that we have. Can also just open up a new terminal like I did here, and then just run that same command, superbase login underscore.
1:16:54What it's gonna do is it's going to give you a login link, so then you can copy that. And then what you have is you have a little copy paste window, so you can copy it, go back to the terminal, just paste it in. So as I just did, now we've authenticated. We're basically in, uh, Supabase. So now I can go back here, and I can say, okay. Logged in. And now because we share access across the entire,
1:17:16um, basically, across all of the terminal instances in my computer, we can now download and kinda proceed with that. So now it's installing it, and now it's applying the schema. For those of guys that are curious, what does the schema actually look like? Well, the schema is just like the the the the the set of tables, uh, in our database. So you could see here that we now basically have three. We have challenges.
1:17:36Challenges contain an ID and a user ID, a name, habit ID, start date, duration date is complete, reward claimed. K. And if we go down, we also have completions, then we have habits. And actually, looks like we have a fourth, which is profiles. Profiles is where we're gonna store some of that user data. So what's really interesting, uh, just historically speaking is, like, you used to have to come up with all this stuff. And, uh, you used to also have, really tight associations, seeing things like the user IDs, uh, in each table so that you knew that the habits that belong to a specific user ID,
1:18:05um, you know, connected to the specific completions and challenges. And you used to have to run all this, like, almost like math every single time that you set up on one of these apps. This just does it all basically entirely automatically for you just based off of what is logical. Like, it's logical for instance that, you know, your habits and your challenges need a name.
1:18:21Uh, you know, it's logical that they need an emoji because that's just how our app's built. Logical that they might have a type between two or three different types. Right? These are all things that just, like, standardize and operationalize the data within our app. It's just now this is the back end and, uh, you know, we're doing this on, a a cloud database as opposed to locally.
1:18:36So now that we have all this stuff, all we have to do is just disable email confirmation. So I'm gonna go to the Supabase dashboard. And, uh, right over here, it'll basically say confirm email, and I'll say no. And the reason why we're doing this is because if not, the users have to go through an additional step in order to log in, which is like, well, I'll create an account, and then they'll say, okay, go confirm your email, and then we'll have to go back and forth. So this is just eliminating the step to make it a lot easier for us.
1:19:00Okay. Great. Let's test the full flow. And with all that said, let me show you guys what it actually looks like now. And I'm gonna run this locally on my computer, and then I'm gonna do the app stuff that we were doing earlier where, you know, I test it via expo, and then ultimately I test it on my phone. And you can see it's finding a couple of crashes before it launches. This sort of thing is pretty normal. It'll self heal and self anneal as needed. So we'll just run this a couple of times until we get the onboarding.
1:19:23K. And now if I make this smaller, so it's more like a mobile app and then zoom in, I think a 150 is probably pretty good. Just do that. Make it a little bit bigger. You can now see that we have the whole sign up flow. So I'm gonna go sign up down at the bottom. Just delete this other one here. And then I'm just gonna add in my email address. And then we'll just add in some silly password.
1:19:46I'm gonna click sign up. So what happens after we sign up? Well, obviously, need to go to onboarding. Right? So now we're saying build better habits. I'm gonna get started. And as you could see, we've now basically just wrapped the app in a login flow. It's the same core functionality we had before. It's just now it's like wrapped where in order to enter, you have a login flow and then the back end you have the database.
1:20:04So I'm gonna click continue, and then let's say, wanna read, I wanna walk, I wanna do journals, and then I'm gonna continue to start challenge. And now, maybe I tap each of these three, you know, we have this cool little thing. We have our history. I know the history is actually being pulled from our database now, and then we can also manage it. I wanna add something new.
1:20:20K. And then maybe, uh, I don't know. I wanna set a set a reminder time like I did before. Okay. So obviously, we can't see sort of the way that the back end works here because we're just doing this locally in our computer. Right? If you actually wanna see the way that this is, you have to go to the database, then you can actually see, like, specific tables. Let me show you what that looks like. K. The first thing is if you go to authentication on the left hand side and then click on users, you can actually see the, uh, data that we just created a moment ago. So I just created an account using my email address. You can see that we were just supplied a UID or a user ID. There are a couple of additional fields here which Superbase just creates for you, like phone, provider type, uh, and stuff like that. And then also under provider, there's email, uh, as talked about. You guys can also sign in using Google and stuff like that. Just add Claude to do that for you. You can also add a user locally here. So this is sort of like your admin, you know, dashboard, at least for now. Um, we can actually just set up a new user. Let's say you have somebody be like, hey. I'm having an issue creating an account. Can you create an account for me? You can actually do it entirely. You just create a new user. You put their email address and password, auto confirm them, and then just give that information to them. They'll be able to log in. So all the stuff that we just did in our app, like, it is actually showing up here on a website essentially,
1:21:28um, sort of verifying the fact that our app is now connected. But it's not just connected to our website. Right? As I showed you guys earlier, I don't why I'm not using my pen for this. Um, we're also communicating locally with our, uh, you know, with our device. So that's why I'm not using it because my errors are so much more, uh, janky. So if, you know, this is our app. This is our device as mentioned, and now our device is sort of communicating with the DB,
1:21:54which in our case is gonna be super base. We've just verified basically that the app can create sort of like a little off page. K? This information can then trickle back to Supabase, and then we can, you know, have a couple of rows or whatever with, like, different different users.
1:22:09What we have to verify now is basically, how about all the data within that user? And that's pretty easy to see as well. All you need to do is go up here to where it says, uh, table editor, and then you can actually see the individual or independent tables. So challenges, completions, habits, profiles. Probably the simplest one for you guys to see is habits because we just created some habits. And you could see that, uh, for a specific user ID, k, which is three f five six a whatever.
1:22:31If I click this, you could see that this is actually, uh, Nicholas Sarai. Okay. It's me. For that specific user, they have four things. They have a a habit called read, another habit called walk, another habit called journal, another habit called ASDF. If I go back to my app, you can see this is actually, like, live. Right? This is 100% live. It's, like, being tracked right now.
1:22:51You can see the reminder hour for one of these is set as twelve. What do I mean by that? I can go to manage. I could scroll down. I can see that information is reflected inside of my database. Right? Um, I can also just remove this, maybe delete it. K. Then I can go back here, then I can give this a quick little flicker. And you can see now what happened. We went from four records in our database to three. Why? Because we just deleted it. And when we delete it, there's a line of code, basically, the cloud setup where it's like, hey, when you delete it, I want you to delete it from the database as well. So how neat is that? You can also, you know, check to see what all of these do. So reminder enabled false, false, false. So maybe I wanna go true, true, true.
1:23:29K. We're I'm actually just gonna set all these. I'm gonna refresh. If I go down to this reminder enabled now, just to really prove it to you guys, you can see that they're all true. Uh, and then I can change the hour. It looks like we also have the ability to change a minute, which is kinda neat. Uh, profiles here, this is basically all of the additional information for the user. So in this case, they just have onboarding complete, and that's additional information aside from my email address and stuff like that. Can imagine that you can make this as complicated as you want. Completion. So this is basically every single time I've completed a habit. It stores the exact date, the count, and the habit ID. So, you know, in three months from now, I'll be able to look back inside of my database and I'll see, hey, you know, I've actually finished three habits on this day. What are the IDs of those habits? Well, it's 177817.
1:24:09And then the app can basically go and it can look for that specific ID and say, okay. So he did three of read, then walk, then journal, which is pretty neat. So this isn't a comprehensive database walkthrough by any means, but I want you guys to know that more or less all databases work in the same way nowadays or at least like the SQL databases, which is the specific type that we're using and the one that I'd recommend for most
1:24:28Um, you're basically just gonna have, you know, the database, which you're gonna set up using this little, um, what's called a schema editor, which AI will do for you. It'll set up multiple of these, like, data structures. So habits, completions, challenges, these are called tables. And then what they'll do is they'll associate that to different user IDs
1:24:44using this authentication, um, page, which is where you, you know, have, like, the the specific users that signed up. And you can manage all this stuff using, um, you know, like, in in our case, Supabase. But usually, no matter what app you're using or what sort of database you're using, there's gonna be some sort of interface where you can do things like, you know, create new users on the fly and and so on and so forth. Now it's not enough just to do this and test it, obviously, on my computer. I also have to test it on Expo, and then I wanna test it on mobile as well. And the reason why is because I wanna verify that the stuff that I just showed you that, you know, me creating a habit or signing up with a new user or whatever reflects not just through, like, the little Chrome tab, but also through, you know, my my my phone as well as, you know, that expo server. And so what I'm gonna do off screen here is I'm gonna go through another two levels of testing. I'm gonna make sure that it works on my computer the exact same way it works on expo and then ultimately, like, on mobile. Because I wanna see if there are any weird sort of interactions, if the haptics are off, if the icons get cut off halfway through and stuff like that. Unfortunately, this testing loop is mandatory, and you're just gonna have to do this every time you design an app. There are some promising approaches where Cloud can actually test things for you on the computer, um, but I've yet to find one that is automated that also allows it to test it on your phone. So until we get to that point, uh, you know, you're gonna have to do some of that testing manually, and I'd always allocate an additional ten or fifteen minutes. Anytime you do encounter an error, you know, I'd recommend just voice transcribing what the error is, speaking in plain natural language to Claude, and it'll probably be able to do a good job. But that's what I'm gonna do now. Gonna go through the process of setting up that expo server like I talked about, and then I'm also editing it on my phone.
1:26:06Alright. So I've bug handled, I've fixed everything, and I verified that it's good to go. I mean, we could publish our app right now, but as promised, I wanna take you guys through higher and higher levels of functionality through this course. So before we finish up and wrap up with this habit tracker, I actually wanna add two additional features. And these are both features which are going to rely on third party services or APIs, specifically AI services or APIs,
1:26:31uh, to basically do things for our users in the background. And I did some reflection on it and there are two here that I really want. The first is I want some form of smart coaching or nudges and you guys may see stuff like this get rolled out to more apps over the coming weeks and months. I've seen this on like my Whoop Band app for instance. I've seen smart coaching in a couple of other places.
1:26:50But basically, what I want is I want periodically to analyze the streak and consistency data in our database to send personalized motivational messages or suggest when to adjust their goals. So an example might be, you know, once every day or week, whatever the cadence is that we figure out with Claude. You know, we're gonna analyze the back end and then more or less push a notification.
1:27:13And the notification might say, hey, you've nailed sleep for fourteen days. Congrats. But we're noticing that water intake is low. Here's a quick hack that you could use, let's say, to improve your water intake. Okay. So this smart coaching and sort of nudge feature is sort of one of the two I want to implement. And then there's one other one as well,
1:27:32uh, called reflection summaries, which, uh, basically, on a weekly, maybe monthly basis, I want to AI generate reports that go into detail,
1:27:42basically giving people significantly more context about how far they they've gone. So for instance, you're the most consistent with meditation at 92%, but exercise dropped off midweek, You know, you scored 19% out of your goal of 33%
1:27:56on x y and z and so on and so forth. Okay. So anyway, whatever the features are aren't super important. I'm just going to show you guys how how you can implement them now. It's fairly straightforward. Basically, so that you know right off the bat, you know, what we're doing here is we're introducing another service aka another layer to things. And so, uh, in the in the case of our AI coaching architecture,
1:28:17what we're gonna be doing is we're gonna have our mobile app, which is sort of over here. Okay? And again, you know, I just I want you to to understand that this mobile app, if I can make my pen work for once, is actually connected to, you know, in this case our phone. Now pay don't pay attention to that specific diagram, but basically, this application is running on our phone. Okay?
1:28:38And basically, our phone, you know, is gonna load up the app. And when the app, let's say, wants to do this, I don't know, maybe daily or weekly, depends on whatever cloud thinks. So it makes more sense for a database architecture, which I'll I'll run you guys through in a second. Um, you know, on a daily or weekly cadence, our mobile app's gonna fire off of a function call, basically a request
1:28:58to a service. And this is gonna be managed by a tool called Supa base edge functions, which are basically simple, uh, serverless back end tools that allow us to, on whatever schedule we want, just fire something really quickly and extemporaneously,
1:29:15like very, very, um, transiently over to another service. And so this is sort of our back end here. This is our catch all. And the the alternative to this is you setting up an always on server, which is just constantly waiting, you know, twenty four hours of the day. What this is, this is a server that basically turns on very briefly for like one second, fires our function and then turns off. And the reason why, uh, you know, this this edge function and sort of serverless function exists is simply because it's more compute efficient and then it saves us a lot of money. Like you you wouldn't be able to run this anywhere near as cheaply if you had a server that was always on.
1:29:46Okay. At least for our level of scale, this is, um, the way we're going to do it. So we use these super base edge functions and then basically what happens is, okay, you know, like, um, you know, it's on our phone, the mobile app is initialized, everything's set up, and then daily or weekly, we'll fire off one of these super base edge functions. Okay. These functions are first just gonna read our database. So it's gonna read in our case, the habits, the completions, the streaks, compile a big package.
1:30:08Okay. And then we're gonna send it to an AI. And so there's sort of a two way graph here. Right? This is gonna send a request. This is gonna get all of the data. So the habit data, completion data, streak data, send it back over here. We're just gonna like dump all that stuff to an AI model, in our case, cloud API. And we're gonna do so alongside some sort of, I don't know, prompt. And the prompt is gonna be really simple and really straightforward. I'm basically gonna say like, hey, here is an example of a a a coaching message. Your job is to come up with a bunch of coaching messages, go through the user's data and stuff like that, then do so. Understand that this is gonna occur on like a daily, weekly, or monthly basis, whatever. Then, um, you know, what's gonna happen is we're gonna return that, k. Right over here. We're then gonna dump that in our database, except now this is gonna be like, I don't know, some sort of like coach underscore message feature.
1:30:54After that, that is gonna come back to our super base edge function, which is gonna deliver it to our mobile app. And then finally, our mobile app is going to send, um, in essence, some form of like push notification, as well as maybe some persistent notification, um, in our, you know, on our phone. So that is in general sort of like what the high level architecture of this is going to look like. And I just want you guys to know this is just more or less how all tools and apps and services that you integrate within an, uh, you know, like a phone app actually work like. You're always gonna have like these core features. You're gonna have the app, you're gonna have the the server. K. You're gonna have the database, and then you're gonna have whatever API it is that you're reaching out to. In our case, we're just reaching out to Cloud API.
1:31:31But, you know, as you'll see as we develop, you know, our calorie tracker app after this one and and, you know, other additional functionality, this is just gonna be the same loop over and over and over again. Starts with phone, goes like this, goes back, and then basically just continue continuously goes back and forth like this. So don't worry too much about the specifics and sort of the technical features.
1:31:50Just understand that this is the flow of, you know, in our case, our AI coaching architecture app and then also the, uh, the reflection summary stuff. So where do we go from here? Uh, it's actually fairly straightforward. I'm just going to, um, actually feed in both of these to AI requesting that they do them. And I'm even gonna feed in a little screenshot of the AI coaching architecture, but I want you to know Claude probably would have come up with basically the same thing just because that's more or less how all of them work. So let's head over here to our anti gravity and then I'm just gonna paste this in. So we'll say smart coaching and nudges.
1:32:19We'll also say reflection summaries. Then I'm just gonna use a voice transcript tool to say, I'd like to implement both of these features into our application. I want you to use Claude as the back end and then send the request via Supabase. Use pretty smart models. Let's use the Sonnet models for Claude. And then you'll also have to update the database and do everything like that to ensure that it works alongside the the flow diagram that I'm attaching.
1:32:46K. And then I'm just gonna zoom in so you guys could see it a little bit better. And then just because I don't wanna give it too much text in context, I'm just gonna zoom out a bit and then I'll just screenshot. And you can feed screenshots in. Um, one thing that we'll do with the next step that we create is I'm gonna show you guys how you can take screenshots of another app and use that to inspire your design.
1:33:05So we're not gonna duplicate or copy the design of an, uh, an app, but we can definitely use, I don't know, the Apple design schema or like the Microsoft design schema or something. Just as inspiration to get like the padding, the corner radius, the little rounded circles, the outlines, uh, all that stuff that like makes a design a design, um, in at least initially. And from there, we'll be able to customize and so on and so forth. So, uh, images and screenshots and stuff like that are very important part of any sort of design loop nowadays with AI and you guys will see how to do that on the next step. What it's doing now is loading the super base skill and then checking, um, the docs for edge functions. So edge functions are a very particular type of tool. Clauda's gonna have to actually read up on what the tool is and how it works before it implements it.
1:33:49For those of guys that don't know, if you just hold control and then press o over here, and I think this works on both Mac and PC, you can actually see a much more detailed breakdown of everything that's sort of going on under the hood. So for instance, basically, we're seeing up here is just a brief summary. But if you hold control and press o, you can actually see, like this is loading all of this documentation into context right now and this is all like edge function documentation.
1:34:10So, you know, here's how to test with curl, here's deployment, here's deploy function. I don't wanna know how all this stuff works because it's obviously extraordinarily in-depth and kind of confusing for me. All I like knowing is basically that Cloud has all the context that it needs. So every now and then, I'll just hold
1:34:26control and press o, open it up and and take a peek at sort of what's going on with the hood. On the bottom right corner here, you can see that we're using a fair number of tokens for this. So I just zoom in a bit. We're from 20,000 up to about 51,000 or so. And so what that means is, you know, 20,000 is basically the floor for most of the time. Like, when you start a new claw chat, you already beat about 20,000 tokens because there's a fair amount of context. It just naturally gets loaded in. You know, it'll, like, read through your files. It'll read that, like, claw dot m d initialization
1:34:56thing. It'll, it has some built in tools and stuff like that that are already part of the prompt that you just can't see. But everything from here on out is actually just like Claude consuming our token usage. So understand that, you know, these features are are not free. Basically, what we are currently doing is we are translating or converting two currencies,
1:35:15uh, you know, tokens and money to feature. And the whole idea with SaaS is I think we continue to get further and further into, you know, our AI future is that there will soon come a point where, you know, nobody will wanna use like a templated SaaS at all. So I think what we're probably gonna do is most of these apps are actually going to be like headless or, uh, like back ends that any user can connect to front end to and, you know, use whatever functionality they want. So in the case of a habit tracker app, for instance, you know, we might deliver an app right out of the box to a bunch of users, and they'll they'll happily pay money for it. But, uh, you know, maybe they want it to, like, look a certain way, and then they'll use their AI to make some minor adjustments to the app. And maybe that's like an additional planner or feature or something like that. So it's basically what we're doing right now. We're just taking, like, out of the box functionality and we're just making it better. Right? Sort of an example I was given Maker School, which is my AI automation community where I show people basically how to monetize all the skills that I'm providing you here is,
1:36:11you know, back in the day, marketing teams would, uh, build these things called lead magnets. And lead magnets are usually just little PDFs or, you know, three to five page documents that like teach people how to do something. And the thing about a lead magnet is lead magnets were also always very templated. And so, you know, you just wrote it once and the idea was, well, you'll just send it to a bunch of people anytime somebody needs help with something. But, you know, because they're very templated, they don't solve everybody's problems super specifically. They just provide like a general walkthrough of how to do something. Imagine though, if you could customize that walkthrough to like a person's reading level, to their ability, to their experience, and so on and so forth. And that's basically what AI SaaS apps allow us to do. And so just like lead magnets nowadays in insert current year, my strategist told me not to include the year in my YouTube videos anymore, which I would agree.
1:36:56But just like, you know, lead magnets don't really work super well anymore because people are just like, well, can't I just ask AI and it'll give me more customized information? So too, I think do like out of the box SaaS apps just slowly lose more and more of their value when we when we get into an AI age. So yeah. Anyway, to make a long story short, don't wanna get too philosophical here. I just I basically did a currency conversion on the cost of 40,000 tokens on my cloud subscription over to like a customized feature in an app that I really like.
1:37:23Okay. So it's saying clean. Here's a summary of everything that was built. So what was created database, coaching messages, reflection summaries, super base edge functions, generate coaching, generate reflection, app side, you know, have context and and and app layout and so on and so forth. Now, you'll see that it is asking me for something to set the anthropic API key, so I basically need to do something. So it's it's asking me to run the new table. So what I'm gonna do is I'll just say, do everything for me that you can without the API key, then walk me through
1:37:53the API key as well. Now I already know what the API key bit is since we're using another service. K? Anytime you use another service, you're always going to be you you need to authenticate. Right? And so what's happening here is when the super base edge function, this goes to our database and then, like, collect a bunch of information, database sends a request back. Remember, um, this is our actual device over here.
1:38:13And basically, what's occurring is the the message is going from our phone to the mobile app to super base down here, back up here. And then in order to actually access, you know, Claude, we need some form of auth. And so you'll you'll always need an API key of some kind, solves that problem. You can think of it as just like a password that allows you to sign in, uh, and that's that's kind of what we're doing here. So, anyway, it's it's done and created everything that it can. All we need to do is now set the API key, and you'll see it actually gives us, um, the steps. You just go to platform.cloud.com.
1:38:42And, you know, this feature is not gonna be free. Right? This is obviously something we are paying for. It's an API. It's an app. Right? But anyway, go here, create a new API key, paste it in the above. Now, if you don't already have an account, you're gonna have to create one. In my case, I already have an account, so I'm just gonna go platform, make a left click, and then I'm just gonna sign in to my to my email address. Now that I'm signed in, you'll see I have a bunch of preexisting API keys already. But just to show you guys how this works, I'm actually gonna create a totally
1:39:06new not expiring key. I'm gonna go add. K. So that's the whole API key right over there and, you know, now I have it copied. And what I need to do is I just need to go to anti gravity and it'll tell you not to, um, you know, actually paste it directly in plain text. And in general, like, you you shouldn't. I'm just being lazy here because I just wanna speed this thing up. Um, but in general, instead of what what you should do is you should go to this dot ENV here and then you should just paste the key in sort of like this, anthropic
1:39:33API key equals, and then just paste it paste it in here. And then you save the file. And the reason why is because this dot ENV is basically like your password manager. It just contains all your passwords. When you insert it into a chat like I just did here, basically, what's happening is, um, Claude stores all of our conversation history locally in our computer. So this is now gonna be stored in multiple places. It's not just gonna be stored in this little password manager file, which it'll automatically add things to. It'll add it to everywhere. It'll add it to like this chat. It'll add it to this password manager. It'll add it to our super base and so on and so forth.
1:40:05Anyway, now that it's done, I'm just gonna say, okay, let's test on computer. And then, you know, we're just gonna go through that three step loop where we start with a computer and then we go to our expo and then after expo, go to, you know, our phone and then just kind of loop back and forth. See here, I have my
1:40:24email address sign in. So I'm then going to do this. I don't actually remember my password. We'll see if that worked. No. It didn't work. Okay. So why don't I just go oh, maybe it's this one. How am I already forgetting my password? That's so silly. Let's go sign up. I'm just gonna, um, see if I can create a new account here. Looks like the user is already registered, so I'm I'm just gonna sign up with a different email.
1:40:46You can imagine how one cool feature would be a forgot password feature. So I'll say, implement a forgot password feature. And I'll just have that churning in the background while I'm there.
1:41:00And then here, I'm just gonna sign up. Cool. It looks like I'm now signed up. I can now get started. We're logged in, how it works, create the habits, so on and so forth. Good. Walk, journal, sleep eight hours, good. Start challenge. Okay. And you can see here, probably just as part of a test, so I will verify. You can see it says get today's coaching nudge. So this will basically look through our behavior and then actually fire it off. And I'll and I'll take a look at that just in one second. Just wanna make sure that everything else is good. We have a weekly reflection feature down over here.
1:41:29Okay. Cool. We have everything that we need. So I'm just gonna get today's coaching nudge, click that button and see what happens because that's kind of the core piece of functionality. And ideally, instead of just getting the coaching nudge, what we realistically want is, you know, we want the, uh, we want the thing just to pop up as a notification outside of the app, and then we also want it to pop up as sort of the AI coach inside of the app.
1:41:50So I'm gonna say is, great. I don't just want the user to manually generate the coaching nudges, though. I'd like you to come up with some automatic cadence and then populate it in the app. The idea is every time the user comes onto the app, they have some form of coaching. Additionally, I want, uh, some sort of push notification so that, you know, if I'm out and about doing my thing,
1:42:09you know, and it's 3PM or something, it fires off and then sends me a push saying, hey, Nick. I noticed you've been crushing it on x recently, but have you considered y? Here's a quick and easy way to do this. Awesome. And my voice transcript tool here did a pretty good job of converting my request and what I wanted directly in. And I see now it's saying we've also automatically
1:42:29implemented the forgotten password feature, which is kinda neat. Because yeah. That's on the coaching nudge, and it looks like, you know, I can only click on this once because it's not it's not repopulating. So that's another feature I'm gonna wanna fix and this generate weekly reflection feature as well if I give this button a click. I think I can just do this more or less every week. I don't actually currently have,
1:42:49you know, built in. I don't have a lot of data, basically. So the probability of this being able to, like, actually give me something good or meaningful is pretty low. But let's read it regardless. The past week was a tough one with an overall completion rate of just 14% across your top three habits, journal, walk, sleep. The one bright spot was Friday, which is today, which where you manage to complete all three habits in a single day, which shows you absolutely have the capacity to do this when the conditions are right. The rest of the week, Monday, k, and it just updated the app unfortunately, which is why we can't see it. But you'll notice that it just cached it. Right? So we're pulling up the exact same thing.
1:43:20Monday through Thursday in the weekend, zero completions across the board, consistency beyond that single good day for the coming week. Try reverse engineer mid Friday work for you, whether it was your schedule, energy, or mindset, see if you can potentially recreate those same conditions on at least two or three other days. Okay. Cool. Looks great. Can see now we no longer have the little coaching feature thing right up here, which is nice.
1:43:41This looks pretty good as well. Awesome. So I'm just gonna generate that weekly reflection, see if the same thing pops up. Good. So this is illustrating to me that our like reflections and nudges are sort of in our database already. Right? So I'm just gonna let this continue on until we get everything with the nudging feature and stuff like that exactly how I want. And then I'll circle back and show you guys. Also, I'm realizing there's this slight little black border around this div and that looks silly considering everything else does not have a black border. So just while we're editing all of this stuff, I'll also say, I've noticed there's a black border around the top bar.
1:44:18The one that says three day kick start, uh, it doesn't look like any other div has a black border. So just fix this, ensure that the design is uniform across the app. Now, you notice what I'm doing here is I'm starting to queue up messages. And the reason why is because I don't have to wait for Cloud to finish the previous thing in order to start on something new, um, especially if it's, like, kind of unrelated. And so what what it was doing over here was it was doing, like, AI coaching features. What it's doing over here is it's doing design features. And so I I'm happy I'm happy to, like, queue up as many messages as it takes.
1:44:47Doing it in this way is just a lot cleaner for me and a lot simpler. And you see that, you know, just while I was explaining this to you, it's gone ahead and actually edited that. So I think that looks way cleaner than it did before. So let's actually just read through what else we have here. So auto coaching on app open. Cool. So it's every time you open the app. Right? And then if there's, um, a recent coaching message within twelve hours, it'll instantly do it. Those daily push notice. Great.
1:45:09I'm noticing right now because we're testing and I don't have any preexisting, um, app or, uh, habit tracking or usage. The reflections and the nudges are all very simple. I'd like to test this out with simulated history.
1:45:23Go through and send me 10 examples of coaching, nudges and then reflections. And I'm asking at this because I just wanna see, you know, if we were to run this 10 times with a a big diversity of different activities and stuff like that in the background, what sort of messages would we actually see? And so, you know, that's how I'm gonna modify the prompt that the AI is using to call the other AI, I think. It's probably the simplest way to put it. K. And I should also organize this a little bit simpler. It'll it'll realistically look like this, which shall change the UX and stuff. So just important to do.
1:45:54Okay. And you can see what it's done sort of in the background, if you can read computer speak. Um, it's just sent 10. Okay. And so that's what all of these are. So I'm just going to take a quick peek at these and make sure they're not total trash. Um, the first is crushing meditation, water dropping off. So you'll see there'll be like a notification with a header sort of at the top of your your your push page saying, your meditation streak is generally impressive. Fourteen days and a 100% this week shows real discipline, but hydration is great quietly working against you with only two hundred plus seven days completed. No streak to speak of. One thing I don't like is I don't like these em dashes because that's very AI. So I'm just going to say, this looks great, but modify the prompt so
1:46:29Claude does not output any em dashes. Em dashes are very typically AI, and the more em dashes we have in these messages, the less human like they'll seem. K. So I'm going to do that while it's outputting the previous response just because that's obviously something that I can do reasonably quickly. And the idea is these next ones should not have any em dashes.
1:46:50K. And then what else we got? So let's see. Solid week meditation star, gradual improvement trend, perfect week. Let's also add some emojis to these titles specifically. And I just want the titles to have emojis. I don't want anything else to have emojis.
1:47:06And it looks like, you know, if we did a bunch of quantity habit apps, your strongest performance this month is read 30 pages that you completed 21 out of thirty days at a 70 consistency rate, showing you can build a real momentum when a habit clicks. Your 10,000 steps habit also held its own at 60% giving you a solid physical foundation to build on. And then we also have a bunch of that need attention and stuff like that. So like if you think about the purpose of, like a review versus a nudge, like a review or a reflection is like a lot longer. Right? It's kind a retrospective and I've done.
1:47:36Whereas a nudge is a lot shorter and it's simpler and there's a brief little title and then like a one line message. And so I think this is a good combination of both the retrospectives, the the reflections and the reviews, these are very long. But then those little nudges are just, know, two sentences. Okay. So I'm just going to scroll all the way down and you can see we have a couple of emojis
1:47:55in the nudges now, which is cool. Rerun this, but just do it three times so we could see how they look. And now what I'm doing here is I'm just having it actually show me some examples. I always wanna see some examples of these outputs before I, like, a 100% hard code this into the app and then go through the whole testing procedure. Oh, also, speaking of testing, come up with a way that I can quickly generate or test these because I'm going through a end to end test right now.
1:48:23Okay. And now we're taking a look at the nudges. Your meditation habit is generally impressive. Fourteen days straight and perfect consistency this week, so you clearly know how to lock something in. Notice how there are no m dashes. Right? They just have these dashes, which are just sort of like the way it's presenting the information to me. Um, after I asked it to
1:48:41give me like a little tool, what it's doing is adding buttons to simulate thirty days of habit history and then trigger the coaching and reflection generation just so I could see the the UX as well because that's pretty important to me. I wanna be able to see sort of the way it's gonna look in in a real app. K. And it looks like it's just done this, so I'm gonna head over to the app as well and I'm just gonna give this a little refresh.
1:49:01K. And you can see it actually automates the process of getting the coaching nudge, looks like. And I think that just triggered a push notification, although I can't see it because I am local. That's why you always have to test things in your computer as well. So I can see I can generate a coaching nudge and I can't see the coaching nudge, which is unfortunate. Generate the weekly reflection, probably not gonna be able to see that either. Nope. How about a monthly reflection? Okay. So it looks like we have daily coaching nudges, weekly reflections, then monthly reflections, which is interesting.
1:49:29Because I'm running this locally in Chrome, I can't actually see these come up as notifications. Anyway, we could simulate them, uh, brief little simulated modal or toast or something like that. For those of that don't know, a modal is just something that pops up on your app screen really briefly. So it's like a full page sort of like thing and then can disappear.
1:49:47And a toast is a much smaller version of that. A toast is basically a notification. If you guys have ever seen, uh, those little like rectangular bars that like pop up when you get a text message, what that's called is a toast notification. And so what we're doing here is I'm basically having the app simulate one of these so that I could see it within my Chrome,
1:50:04um, sort of local run even if it's not something that I have the ability to get real notifications in right now as a test. I just wanna be able to simulate and then make sure it a 100% works. Because the cost of doing this and then verifying whether or not it looks and and reads the way that I want it to read in this sort of simulated aspect is way lower than the cost of me doing it wrong the entire way through the testing loop from Chrome to Expo to my mobile.
1:50:31Okay. So what I'm gonna do here is I'm just gonna refresh this because it just gave me the the the final button. And I wanna simulate thirty days of habits where some are mixed, some are 50%. So if we go back here, you can see that I have a couple of tracked days now. These are my thirty days of previous habits. And now I think I can simulate some form of notification.
1:50:53You can see edge function are turning on to see see what I was saying here? So this is actually simulating a notification, but, uh, the function failed. And so there's actually no there's nothing happening underneath. If I had waited the entire way through to my phone, you know, I would have had to like go through this whole step, this whole process multiple times.
1:51:10Um, so I just basically saved myself a little bit of time there, is quite nice. And that's what the push notification toast is kinda gonna look like. Okay. Alright. So this is going to do some real user j w t stuff. It looks like it was just a minor authentication error and that's all good. We'll wait for that to finish and then circle back. And now that it's done, can see I resimulated that and we had a really nice push notification right there.
1:51:32And, uh, you know, we got a little like robot coach up top, uh, little toast scrolls down. You've hit all three habits today, but your thirty day consistency sitting at just 3% tells me today might be one of those fresh dot dot dot days. You know, if you're in a phone, you give it a click, it opens up the actual notice and then you're you're in the app, which is quite nice. So that's a lot better and now I can actually go through the rest of the testing loop, which is starting up on a little expo
1:51:53and then working my way through that. So looks great. Open up a fresh terminal for me and then run the expo server. I'll take a QR code pick and then use that to open on my phone. Make sure it's a fresh terminal, e g not inside of this
1:52:13thread, but actually on my computer terminal. K. And I just have to add that extra context because I've noticed the last two times that I've done this, it's repeatedly I launched a terminal inside of it. K. So this looks pretty good to me. I'm just gonna zoom way in. Let's go y. And what this is doing, if I just zoom in,
1:52:32so go through the process of what looks like installing a tunnel. Okay. Now, after we sorted that out, I'm now opening up the Expo app just like I did before. And understand that building and doing it on your phone, it's a very different process than building and doing it on your computer, of course, and so it may not work right off the get go. And I'm already seeing a couple of errors, which I will show you guys right now by running this iPhone mirroring app, just so you guys could see it with me.
1:52:59I'm not gonna do the debug after this just because hopefully you guys understand the debugs tend to be pretty similar. But it looks like we still have the icon getting cut off error. So it's one thing that we need to fix. So I'm actually just gonna open up a little window here and this window is going a little transcript window here and then I'm just going to fire off all the changes.
1:53:18Okay. So the first problem is the icons are all cut off
1:53:24halfway through. For whatever reason, it's like the heads of the icons are all cut off.
1:53:33I think this is a mobile specific issue. I'm not seeing it happen anywhere else. It's not on the local Chrome when we run it. It's always just on mobile. I see this with the little star emoji initially. I see it with the confetti emoji on the
1:53:51today page. I'm seeing it on and off across the other pages as well. So this is telling me there's just some issue with how the icons and emojis are sort of being formatted. Now, while I was testing, I kept on getting this error here, commander failed to start tunnel. And basically, what ended up happening was after you make a certain number of servers with a particular service, it suspends you and basically says, hey, can you verify your email? We wanna make sure you're not spammers.
1:54:20And so I kept on like banging my head against the wall. Was like, what's going on? What's going on? What's going on? What's going on? The debug loop of that was literally me just copying this in and then pasting this right here. And after I did this three or four times, I just naturally and sort of inherently found the issue.
1:54:37So that's what I did up here and then it ended up saying, found it. Your ngrok accounts needs email verification, so now I'm gonna open this up. I just have to verify my emails. I don't I don't actually know if I have an account. I'm just gonna go back here and then probably set one up. Let me see.
1:54:54Okay. And then after verifying my email, I have the thread back up, so I can then just take a screenshot of this, or rather, I open this up in my camera and just repeat the exercise. So I leave this part of the video in, not because I think it's gonna win me any engagement points, but just because little weird stuff like this happens when you program and develop things. Just is how it is. I think most people would like to eliminate that from their videos and tutorials so that you think it's a lot easier than it is, but just like little pieces of friction and stuff like that. From time to time, this will consume your tokens. This will cause your rate limit to stop and stuff like that. The most important thing is not like,
1:55:30will I run into a bug? Because I'll be honest, you are going to run into a bug. The thing to remember is when I run into a bug, keep a cool head. It's It's not the end of the world. I am literally talking to intelligent sand right now. So it'd be kind of unreasonable to expect that there wouldn't be some sort of problem with some server or whatnot. Anyway, I now have it open on my actual phone. So I'm just gonna run through a testing loop on on my phone because, um, I just finished up with this. And, uh, I'll let you know how that push notifications, everything like that go. Just not gonna leave this in because you're just gonna be staring at me clicking on the screen. And it looks like everything is working good on the phone end. We get the push notifications,
1:56:08uh, although I did have to enable that manually in the settings. I also have the ability to swipe them away and, you know, they sort of come in at odd intervals. Uh, I have the ability to trigger them. So for instance, I triggered one on my phone to occur right now and then I saw it pop up at the top. Really, the only last thing to test if you wanted to make sure that this worked 100% of the time would be,
1:56:28some sort of like scheduling. So you'd need to ask Claude to set one to show up on your phone, let's say, at a particular time. So maybe in my case, that would be, I don't know, like twelve or or 01:23, let's say, one minute from now. And I just have to sit there sort of staring at my phone to make sure that, you know, that works. And assuming notification pops up, awesome. Everything's good to go. If not, there are a couple of things that you're gonna have to, uh, uh, do before then, obviously.
1:56:53Okay. So that's that for actually building in AI functionality and API calls into the app. Hopefully, you guys see it's not actually all that difficult. It's more or less the exact same thing that we were doing before, just talking Claude and coaching it through solving some problems for us. What I wanna talk about now is, you know, before we actually deploy this and then push this to, you know, a place like the App Store, there's just one final step.
1:57:15And that final step is one that I think like 99% of people in our vibe coded economy nowadays are going to skip because it takes some time and it's not very sexy. But it's it's that 1%, I think, of people that do that ultimately have apps that that end up going somewhere, making them a fair amount of money and, know, being used by by thousands or millions.
1:57:34And that's up with security. You know, if your app is security dumpster fire, you may have some people start to use it, but when all of their data gets, you know, horrifically leaked, when their usernames and passwords or whatever go into the the the dark web ether or whatever the hell, know, essentially when they get compromised, You'll completely murder any sort of reputation
1:57:55that you might have built with setup. But more importantly, you're also exposing yourself to massive, like, fiduciary liabilities. You're exposing yourself to issues like people leaking your API token and then running up your and then other users accounts to millions, if not tens of millions of dollars. We've seen this sort of thing happen actually at scale here, and these big providers are only sort of, like, loosely able to reimburse you or subsidize you for some of that token usage because at the end of day, it is your fault.
1:58:22Um, there's a lot more as well if you think about, like, government regulations surrounding particular types of sensitive data. Now in our case, we're dealing with a habit tracker. But if you're dealing with somebody's, like, personal health data or, you know, personal financial data or if you're using maybe some open authentication connector that, uh, connected to something that allowed people to sign into their bank accounts. You know, if that info gets leaked, you can be on the hook for, uh, quite the pretty penny.
1:58:44And so I'm not a lawyer and this isn't legal advice. I'm also not a computer security specialist or anything like that. Although, I think that would be a pretty cool career now that I, uh, now that I come to to think of it. What I am is I'm just a guy that's interested in getting the biggest bang for my buck. And the way that you do that, at least with AI for vibe coded apps, especially mobile apps, is you just have a prompt that you feed Claude that methodically
1:59:07and consistently checks all of the major low hanging fruit in your security. The reality is us as, you know, solo devs or even working within a team are very unlikely to make something a 100% secure. And you best bet, even if you think it's a 100% secure, it's not. There's probably still some sort of loophole or problem. What we can do though is we can eliminate, you know, the eighty twenty. We can eliminate all of the low hanging fruit that, you know, attackers and then also, uh, platforms typically
1:59:34use in order to, uh, you know, compromise your data and ultimately land you in hot water. And, I mean, anytime you start any business or build any sort of app or help use any sort of technology, you're always gonna be facing some form of risk. So my goal is not to eliminate the risk completely because as mentioned, I think that's impossible. But what we can do is we can eliminate a fair amount of that risk and then just get it to the point where somebody would look at your app saying, okay. That's actually pretty secure. I don't really think that's worth hacking. Let me just move on to the next one that's a little less secure. Right?
2:00:01So what I'm gonna do now is show you a simple and straightforward security prompt that you could use only on apps that have gone through all three prongs of this testing procedure, You know? So Chrome, let's say, or whatever your browser of choice is, Expo, and then ultimately, like, actually testing it on your phone in Expo. And once all of that is done and you've a 100% verified that, like, the app is basically ready to you would you would run the security prompt audit like I'm showing you. And I also want you guys to know this isn't the only thing you can use. It's just one of many types of security audit prompts. The most important thing is not to get it a 100% correct. The most important thing is just to do it because by doing it, you will, as mentioned, at least make some progress towards the goal of ultimately being more secure. So what is this prompt? Let me show you.
2:00:43K. Just zooming in so you guys could see this. This was posted in one of my older courses, uh, specifically in a module called security for vibe coded apps. So what I'm gonna do, now that I'm done with everything, is I'm just gonna scroll all the way down to the bottom. As you could see, it's pretty chunky. It's pretty large. And then I'm just gonna go back to Claude,
2:01:00and I'm going to feed that in. So I'm now, before I run this, sorry, I'm I'm gonna clear all of my conversation history. So I'm running with a fresh instance of Claude that doesn't have any of the context of our prior conversation. And now that we're down to zero tokens again, I'm just gonna command v, paste in this giant string, and just have it go on its way. And so basically, what this thing is, if I show you guys a couple of key points,
2:01:25is it is a comprehensive list plus formatting of ways to identify
2:01:34and then solve the major low hanging fruit, which typically involves specific vulnerability patterns like hallucinated packages, missing server side validation, default open database policies, hard coded secrets, and inconsistent off middleware, uh, for your mobile app. So, you know, as mentioned, you don't need to know what's going on under the hood here, and you're not going to be able to a 100% solve all security, but you'll get pretty close. And then after, what we do
2:02:00is we basically have it rank it in, um, a big tier list here alongside the security finding number. So you'll see there'll be a lot of security findings, maybe like 50 or 60 or something. It's just gonna go methodically top to bottom, telling us whether or we have a critical severity, high severity, medium severity, or low severity vulnerability. What sort of category it is, the location of it, and then the, uh, uh, CWE, which I think is a particular
2:02:22acronym, uh, that I'm forgetting that, uh, deals with security. Yeah. It's called common weakness enumeration, which is basically just a list of the common ways that people usually get access to apps. Okay. So I'm not gonna run through absolutely everything. What I'm gonna do instead is I'm just gonna show you guys what the actual output is. And you'll see that there are actually a fair number of vulnerabilities already, which kinda sucks.
2:02:44So scrolling up all the way to the very, very top of this. Okay. You could see that we've passed the hard coded secrets vulnerability. That's great. What that means is we're basically just not pasting our API key anywhere, but in this file right over here or in Supabase itself.
2:03:00Git ignore coverage though is partial, and so that's something that we can fix. Public prefix leaks. K. So we are past that. Console error leaks, partial. K. Startup validation is a complete and utter fail. K. And because it's a complete and utter fail, it's obviously something we're gonna have to fix.
2:03:19You know, just going through here, there are very few that are 100 fails. Most of these are partials, which is good. Protected API routes, for instance, that's a major fail, that's actually kind of chunky. So I'm glad we sorted that out. Air information leaks, so there's a lot of info that comes out when, you know, we run like a console script or something like that. So we're gonna fix that.
2:03:40Expensive operations, so there are some things that are pretty expensive. And this basically says that an attacker, if they just want us to take us down, could run this sort of thing over and over and over and over and over again to burn our clawed tokens. There's some other, you know, issues and so on and so forth. But basically, once we've loaded all this stuff in,
2:03:57I'm going to ask it. Okay. Great. Run through and fix all of these errors end to end. After you're done, test and ensure they are 100% solved.
2:04:10Okay. And the first time that you run this and then have it, you know, solve these problems, it'll go through and it'll say, hey, just solved all these problems. You're good to go. But we're not just gonna run this once. What I've come to realize is that sometimes in solving one problem, it creates another somewhere else. And so after we solve this first run through, I'm actually just gonna clear it and then run a totally new prompt again to see if a future version of Cloud can spot issues that a past version of Cloud has created.
2:04:38Once we're done with that, okay, after we did two, I'm like 90% satisfied with most of the security, um, alterations. Obviously, if you're a big CS security guy, you're probably over here shaking your head, and you're like, you should be manually going through all the code yourself and so on and so forth. But I mean, the whole idea behind AI is to massively multiply my leverage. Right? Sure. I could 100% verify that every line in this code is written in a specific way, but even human beings make mistakes. And so me going through all of that manually is unlikely to be much better than me doing a couple of passes of this. Now, you are launching an app and scaling it to hundreds of thousands of users, of course, maybe that's a little bit different. And I'd recommend, you know, actually having like a whole team of people that review things and and so on and so forth just to minimize your actual attack surface.
2:05:21But in my case, all I'm gonna do is I'm gonna go back to the top of this prompt and I'm just gonna paste it in again a second time. Okay. I'm gonna let that run one more time. I'm gonna see if there are any additional issues. And again, it has no context of the former fixes, so it's just gonna see and and identify any new generated vulnerabilities or ones that the previous one couldn't catch. And you can see a lot of the previous failures are now either passes or partials. And so the git ignore coverage, for instance,
2:05:49that hasn't changed. The startup validation went from fail to partial. Severities are now low. Same thing with a couple of these other ones, like schema validations and, you know, unused dependencies and so on and so on and so forth. Same thing with the expensive operations as well. I'll say, great work. Fix all things even if they're partial.
2:06:11Once sorted, let me know if the changes produced new vulnerabilities. And we'll just go through same thing top to bottom. And at this point, we've gotten basically as far as we can in app development without actually pushing this to the app store. There are a few ways that you could test this further on your device if you wanted to, like, actually have a little app widget that you clicked on that immediately opened your app.
2:06:32The way that we're currently doing it expo is the freest and it's the straightest line path to doing so. It also doesn't take any time. But if you wanted to run this, let's say, an iOS device, you could sign up for test flight at this point, which is a specific, like, Apple developer program where you submit their app to a review team. The team reviews it within twenty four hours, and then you have the ability to give, I think, to, like, a thousand or 10,000 users a link to the app just to, like, test and and so on and so forth. Um, we're not gonna do that because I think Expo covers the 8020. What we're gonna do is I'm just gonna move on to building a bunch more apps now with you now that we understand the the the full way through. I'll level them up, make them significantly more complex and also sexy. And then finally, we'll get to the end of the the course. I'll I'll actually submit the apps directly to the App Store. And then after the review period, I'll I'll, you know, run them on my phone and so on and so forth just to make sure that it's a 100% good. Okay. Let's move on to our next app, which is going to take all the same sort of functionality that we built with these apps. Uh, so, know, the ability to add things to a database, the ability to read things from that database,
2:07:30the ability to do things like push notifications on your phone, the ability to have AI run synchronously, you know, while you're using the app as well as while you're not using the app to generate notifications and and so on and so forth. Uh, the ability to connect with OAuth providers and also do authentication through Supabase, and then also the ability to contact and work with however many APIs you need. Let's take all that same functionality, let's combine it in a much slimmer and tighter and faster and sexier form package, which I'm going to do in the guise of a Cal tracker app. Very similar to cal dot ai, that app that recently sold for between 50 to $100,000,000.
2:08:07So let me run you guys through exactly how all that's gonna work. Alright. Now that we've done one core app walkthrough, and I've shown you guys the general high level process of walking through like an MVP all the way to an actual finished product, a live app that works on your cell phone. Mind you, without the app store bit, which I'll get into at the end of this course.
2:08:28Let's standardize it and let's create a couple of additional apps in a much more accelerated fashion. So the very first thing we have to do is, you know, we have to actually, um, standardize or outline the framework. And so what I'm gonna do here, so I'm just gonna call this app design framework.
2:08:45And then I'm just gonna walk you through more or less everything that we've actually done in order to get this far. So if you think about it, the first thing we have to do is we have to do MVP ideation. And the MVP ideation is basically just this right over here. Right? We need to come up with the one thing, map the action to reward cycle, add only what supports the loop, ensure that there are only five to maybe seven screens total, then have some sort of like retention hook that keeps people using the app.
2:09:10So we'll do that for our next one, but basically what I'm saying is you have to start with the MVP ideation. If you don't at least have a rough idea of what you're building before you start building, you're probably not gonna have a very good time. Okay. And after the MVP ideation, what we have to do is we have to build. Now that building process, a lot of the time ends up just being, you know, use a voice transcription tool like I'm using down over here. And then you just dump it in, uh, have Claude run through at least one build, and then you have something that's kind of workable.
2:09:38Now, I'm gonna add one additional step between build and then test, uh, and that's going to be to design. Now, in the habit tracker app, you know, I thought I'd just come up with like a reasonable quality design initially, and I didn't really express very many opinions. But once you have the core sort of local app functionality built, it's very easy to take that functionality and just say, hey, I want you to, you know, take the same layout, but then apply different styles to it, make it thematically different, or I want it to look like this other app, or maybe this website, or I want it to have the feel of Apple, or maybe, you know, Google, or or something like that. And basically, a cloud will very quickly and easily be able to spin the design in as many different ways as you want. There's actually a whole emerging class of SaaS businesses that just take preexisting app functionality. So apps that other people have built and then just tweak or spin the design five or 10 different ways, moving around icons and stuff like that. So that it's more, uh, you know, agreeable to to a certain subset of users. So I'm gonna show you guys how to do that.
2:10:34Anyway, after you've designed, obviously, we need to test. And our testing protocol actually consists of three, uh, smaller steps. The first step is obviously we have to do this on our computer. And so, you know, whether you're doing a iOS or a Chrome sorry, an iOS or an Android app, you're probably gonna wanna test it on something like Chrome locally, at least if we're using React Native and Expo. Once we're done, you can test via phone,
2:11:01but you can do so using a mirror. And that's what I was showing you guys earlier with the iPhone mirroring app. Similar examples exist for Android as well. And then after you're done with the mirror, I'd recommend testing on phone and that's like your real actual phone. And the reason why is because, you know, it's very easy to standardize testing on the computer and then just get it over and done with. And if you catch an issue here, then you can solve it before propagating down to the mirror and then ultimately the real phone. When you do mirror testing, it's usually a lot easier again just to quickly swipe through using,
2:11:32you know, functionality and and and usability that you already understand. So I don't know, using your little scroll wheel and going up and down, clicking on things with the computer and stuff. You're also not kind of going between devices, so you save a bit of time. And then finally, at the end, you know, you actually go all the way down the stack and test with your phone. Because as mentioned, there are a couple of key pieces of functionality that you just can't get on the computer. Uh, and that is things like push notifications, for instance, or like haptic feedback, which you can't get on the mirror as well. And so basically, after we're done with this test, okay,
2:12:01we add a database because everything up until now has just been done locally. That database will also include some form of auth. Okay. And so in our case, you know, we're using Supabase and and so on and so forth. That's actually really easy. You guys have already seen me do that once.
2:12:17HOOKAnd then after you add the database, because we've now fundamentally changed the way that the app works, we've also introduced a lot of opportunities for failure. Right? You know, database is fundamentally going to work a little bit differently. Those are sending requests over to another server. Uh, and, you know, in the case of implementing, an on off mechanism, for instance, there may be some friction when, like, you use Google sign in or I don't even email and password sign in. So what you do after you add the database is you have to test again.
2:12:42HOOKAnd this test again is basically gonna be the exact same thing that we did over here. So very straightforward. We're basically just repeating this process. And then afterwards, you're gonna want to do a security audit. And that audit is necessary because, you know, back over here, if you think about it, we were doing stuff locally. But after adding the database and the authentication, stuff like that, now this is technically this is technically live. This is something that's, like, occurring on the Internet and anybody could use it. And after we're done with the security audit, if you think about it, the last thing we do is we do a third end to end test
2:13:12and then we deploy. And I'm using the term deployment here, um, sort of generally. This could include submitting to the App Store. It could include pushing your your app to, like, you know, a live, uh, production repository on GitHub or something like that if it's already up and running. Uh, whether you're implementing a whole app or a new feature, this is the exact same flow. Basically, you just repeat it over and over and over and over again. And so in our case, that last deploy feature, which I'm gonna show you guys at the end, is gonna involve bundling our app up into a nice sexy package and then actually submitting it to the the app store.
2:13:41Okay. So what am I gonna do now? I'm just gonna duplicate the same flow another two times to show you fundamentally different types of apps. Apps that now, you know, use your camera, apps that have like way different functionality. And, uh, we're just gonna run through this a couple of times just to really get that muscle in. Okay. So the very first thing we need to do for our next app is MVP ideation. So what I'm gonna do is I'm just gonna move this down here and I'm just gonna brainstorm
2:14:04the next app that I wanna build. And this is me kind of cheating, but basically, the next stat, uh, stack I wanna build is sort of like a Cal AI lookalike. And the reason why is because, um, you know, as mentioned, this app sold for 50 to $100,000,000, and I also think it's like a great example of using AI functionality. Essentially, way that it works, and you can see the number of screens is pretty limited here. Um, this just tracks your calories on a day to day basis. And it's actually not that fundamentally different from our habit tracker. Just stay with me here for a sec. You know, we have some sort of daily log.
2:14:35On that daily log, we have a certain number of calories that, like, we desire eating. And so typically, you'd set that up in some sort of onboarding screen just like you'd select your habits. You know, as the day goes on, you can add or track different things that'll fill up the number of calories just like it fills up our challenge goal. Uh, the only real additional piece of functionality is we're just gonna be sending pictures of what it is that we're scanning over to AI.
2:14:58And, uh, the way that Cal AI works is they also hook up to like a couple of databases that have barcodes and food labels and stuff like that. I'm just gonna leave that functionality out because I think the core loop really is that take a picture of your food and get the estimated number of calories. And, you know, I should note that this core piece of functionality is reasonably accurate, but it's still plus or minus maybe 10 to 15% calories. There are just a lot of things that AI can't know about foods like, you know, how deep the dish is and and stuff like that. So, you know, we're not actually expecting this to be 100% accurate with calorie trackers. We're just using the state of the art functionality and getting about as good as these guys get with ours.
2:15:32Okay. And then obviously, after you take a photo, you can see the calories. You can track your progress. Notice how they have very few screens. This is says home. This is progress. I think this is groups and that says profile. Well, it's kind of blurry for me. And then, uh, you know, they also have some social sort of functionality and I'm probably gonna leave that part up.
2:15:47Okay. So the core app loop is basically gonna be right over here. We're gonna grab these four and I'm gonna run you guys through what that process looks like. And then for design, we're just gonna flip the design a little bit. It'll it'll look a little bit different. Maybe even a little bit better. Who knows? Okay. So I'm now just going to voice dump all of this into one big prompt.
2:16:06So I'm gonna double tap here. I'm using an app framework where I define a core function, then a core loop, then accessory features, then minimize the surface area, and then finally add some sort of retention hook at the end. My goal is to build an app similar to Cal AI. My core function will be the ability to track your calories and then take a screenshot
2:16:27of a piece of food, have that sent over to an AI image processor, and then return the probable number of calories as well as macronutrients. From there, we can add calories to our daily, you know, goal, uh, alongside protein,
2:16:40carbs, and then fats. The main action to reward cycle will revolve around hitting your calorie goals on a day to day basis, as well as your macro goals. Um, and also some sort of like visual
2:16:53stimulation every time you track and actually add something to the app. Because again, the whole idea is we want to have users return to the app over and over and over again, uh, every time they they wanna log a meal. In terms of accessory features, we want a couple of things. We want the ability to, uh, track your progress. So you need to be able to visualize this, see it sort of laid out in front of you in a chart type view. Uh, you need to have a calendar, which sort of goes back over time so you could see what previous logged entries were. You obviously need some sort of log in general, so the user should be able to see everything that's going on, uh, historically with all of their their, uh, calorie tracked features.
2:17:28You should be able to have a clean interface where I take the photo, uh, and then send it over. And then you should have some nice sexy homepage that, you know, talks about all of the various features that most people usually have in an app like this. In terms of surface area check, we're aiming for somewhere between three to four screens. You know, we're probably going to want to have a home screen, which at a glance shows most of the functionality.
2:17:48We're gonna want the ability to take a photo of the calories as mentioned. There's gonna be some screen that pops up after you take the photo with the perceived nutritional information. The user should be able to make minor adjustments to that, maybe increase the calories or protein or whatever the heck. Because sometimes, um, AI calorie tracking functionality via photos is not accurate.
2:18:09And then finally, there needs to be a screen that allows them to track their progress too. Uh, you should probably also add a settings page, uh, assuming that doesn't bump us over the five to seven max screen limit. And then for retention hook, you're just going to want to add push notifications to the app to bring people back repeatedly. Um, you know, hey, have you tracked your breakfast yet? Have you tracked your lunch yet? Have you tracked your dinner yet? And so on and so forth. As well as periodic notifications congratulating people on streaks.
2:18:36So build some sort of streak functionality in as well. We'll do all of this locally to start and then eventually migrate this over to, uh, you know, a a database later. Okay. And then all we do is I'm just gonna zoom in here. We're going go new window, and then I'm going to open folder. And then instead of habit tracker, I'm going to call this cal tracker.
2:18:54As you can see, we're big on the trackers. We're just going to repeat the exercise. So let me make this nice and pretty so you can see what I'm doing. Double tap on the page, open up Claude, and then this is where we're gonna store all of our files and so on and so forth. Now, just like I did before, I mentioned that, you know, we we basically have Claude guide us through the expo setup.
2:19:13I'm going to build a mobile app using Claude Expo and React Native. Should work on all devices. Scaffold me out the workspace
2:19:25in the current folder. Again, we don't actually have to do any of that downloading or anything like that ourselves. It'll actually just go through and do it And I should note, you could also just duplicate your habit tracker folder if you want to, um, and it'll just it'll scaffold it out very similarly to the habit tracker. You could then say, like, hey. I want you to make some adjustments to this repo. Here's the new app and so on and so forth. I'm just trying to approach it from, a token minimization standpoint. And I also wanna show you guys how easy it is, like, create a totally new app every time. It's very straightforward.
2:19:50Okay. So you can see that this is what it's doing. Scaffolding the expert project with TypeScript, file based routing, and cross platform support. I'm just gonna wait until all this stuff is good to go. And now, I'm just gonna paste in my giant prompt. And, um, because the voice transcript tool I'm using just allows me to like kinda keep it in my clipboard, I just held command and pressed v.
2:20:07Now, have the entire app. So you could see here, it, uh, is going to take this, start scoping the functionality, and then actually build me my little MVP slash demo. I'll circle back when this is done. Alright. We've now passed our TypeScript test with zero errors. That basically means that, uh, the code is technically compiling. It's technically finishing, which is nice. That doesn't actually mean that the app works for sure though. So what we need to do is we need to actually test this locally on our computer. So I'll say, uh, run this locally on my computer. I want to test via Chrome.
2:20:39Looks like we also need to add our Anthropic API key in settings to enable AI food photo analysis. Now, it would be nice to use totally new not expiring key. I can't because, know, you can't actually like take a look at this once you've created it. They only allow you to do so once. So I'm just gonna create a new one in my current workspace and I'm just gonna call it cal
2:20:59tracker app. K. We'll go add, we'll copy that key over, and I'll go back over here and then I'll say this is my key. I'm just doing it because I'm I'm gonna wanna actually test all that functionality. I'm we're probably not gonna be able to take a a a photo with our camera, unfortunately, but, um, all good. Store this in a dot ENV. And, you know, you can see sometimes it'll actually say don't paste the API keys in the chat. Again, I'm just sort of skipping a step. You can go here, go dot ENV and then create one. Um, it just did right over here, which is nice.
2:21:29Okay. Great. So with all that said, if I now go back to the actual app, can see it's open right over here. So let me see what this would actually look like. And note the design is still quite low quality obviously because we haven't done any sort of customization or anything like that. K. And we have it open. I'm just gonna zoom in a bit more so you guys could see. 200%, I think, is reasonable.
2:21:49And as you see, the very first thing we have is we have this 2,000 remaining calories. We then have protein, carbs, fat, and then today's log. And click this button, take a photo or choose from gallery, which is kinda nice. Okay. And I'm just gonna grab a food, uh, picture. So why don't we go plate of rice and chicken or something? I'll just grab I don't know, maybe this. That looks pretty easy. Right? It's like pretty easily interpretable.
2:22:12And I'll just open this in new tab, then I'm gonna save this and I'll say riceandchicken.jpg. So that looks pretty good. And I'm just gonna pretend, you know, for the the purpose of this example, that I've actually just created this. Uh, you know, like, actually just taking that photo with my camera. K. And we're just gonna make this a little bit smaller here. I'll click take photo and it'll open up my little file finder.
2:22:34And now you can see we're, uh, coming up with an issue. This dot validate path is not a function, but we do have half of the functionality done, which is, you know, we can actually upload a upload a file, which is cool. So I'm gonna say getting this when I upload an image slash take a photo, and then I'll say fix.
2:22:51So that part's pretty good. I mean, you know, I'm I'm sure that'll sort it out in a second. But let's take a look at the progress and see how that looks. So May 2 to May 8, so we actually see this is probably gonna be like, uh, some form of calendar where you can see the number of calories that you've logged, which is kinda cool. Then we have our settings, which is where we can adjust how many calories, how many how much protein, how much carbs, how much fat. And we can even enable some notifications. And you can see when I did that, it said, um, you know, should be allowed notifications.
2:23:14So if I reload this now, we can actually put, um, notifications on. You can see here we're also getting some sort of issue. I'm saying this popped up when I accepted notifications. Fix. I'm just gonna dismiss this so I can see the rest of it. We also have the ability to change our Anthropic API key, which is quite nice. And it doesn't really look like I can exit out of this little error message. Okay. No. I can't. I just need to click on that. Cool.
2:23:38So while I was just testing this, um, me just feeding in those brief little adjustments to Claude, you know, it's saying it's actually gone ahead and and fixed it. So we now go to take a photo and I upload this. How's that looking? We're seeing failed to fetch. So now when I upload, it says failed to fetch. Fix. We're just gonna work our way progressively through this until we finish. We're now gonna refresh.
2:24:00Let me see if I could take that photo. And now we actually have the analysis occurring, which is quite nice. And this is cool. This is cool. So you guys can see here, we now have the title roasted chicken thigh with Spanish rice, which is nice. Number of calories in total, six fifty. Protein, 42. Carbs, 58. Fat, 26. We can actually adjust these if needed. But as you guys see, this is a very simple sort of UX and we can we can now add that to the log. After we add, we get a cute little modal says added to log, and then we have the number of calories remaining as well as what we filled it up with. That's really cool. So I like I like, uh, what's going on so far. K. And now we have a one day streak because we've logged, and we also have today's log.
2:24:35Now what I think would be really cool is if I could click on this, I could actually go into that. We So we don't currently have the ability to do this. And then progress, you know, we see some of these numbers are starting to double up on each other, so that's an issue. Uh, it would be nice if I could edit stuff. So I'm gonna add an edit functionality feature, which, um, should toggle when I give it a click. Also, the way I want this calendar is I I literally want a calendar. I don't just want that. So I'm just gonna adjust all of these and feed that into AI.
2:24:58While I'm at it, I'm just gonna test this little meal reminder toggle. Doesn't look like anything's happening right now, so I'm gonna make sure to make a note of that and then send it over. Hey. The app looks great. So far, I like the core feedback loop. I should be able to click on the pop ups under today's log to edit the entries. So make sure there's a way to do that. I'm also noticing that the text is wrapping kind of weirdly. And from a design perspective, I think there are a bunch of ways we can make that better. I'd like you to comprehensively audit the design using, you know, your own local testing flow. Make sure that if you add things, uh, and log things that you could see all the text and so on and so forth.
2:25:30For the progress page, I want, um, an actual calendar, not just a, you know, sort of like bar chart log. I'm also finding that when you add an entry, the calorie amounts sort of overlap. Something about the threshold looks kind of weird, and now we have a bunch of text on top of
2:25:48other text. We should also be able to edit the history. And really what I want is I want you to be able to click on a specific calendar day and then see all of the logged items for that day. And then finally, for the settings page, when I click on meal reminders, nothing happens. So I'd also like you to comprehensively audit that. Additionally, add an onboarding screen so that when a user starts the app, it runs them through sort of what their goals are,
2:26:10asks them whether they like to lose weight, gain weight, maintain weight, build muscle, etc, all their standard run of the mill stuff for calorie tracking apps. And then uses that to allow them to personalize their plan based off of, uh, macronutrient goals and stuff like that. Also make sure to give them a recommended plan so that they're not just having to come up with all of it themselves.
2:26:29Maybe have a way they can pump in like their their height and their weight and stuff to work out like some some calorie averages. Before you put any of those in, actually do the research because I don't just want you to pull it out of your ass. Okay. Go ahead. So it's pretty comprehensive. I'm now just going to loop around and we'll see how it goes. Alright. And it just wrapped up here. It took two minutes and fifty six seconds to implement this feature, much faster than anything I would have been able to do on my end. Really cool seeing all this work. You can now see we have an onboarding screen that says, what's your goal? We'll personalize your daily targets, lose weight, maintain weight, gain weight or build muscles. I'm going to pretend it's actually me and I'm trying to gain weight. I'll click continue.
2:27:05And now it's actually gonna ask us, hey, you know, use this to calculate your daily energy needs via via the Mifflin Saint Georg equation. That's interesting. So male or female, I am male. Let's not talk about my age. You know, let's say I'm six two. I am seeing that like this extends a little bit to the right, unfortunately. So I'm just going to start logging things.
2:27:28Hey, I'm noticing that the height and foot and inches markers unfortunately extend and sort of break the the page width. On mobile, it just doesn't really work, so fix that and make them a lot tighter. And then, I don't know, let's say I'm like a hundred and seventy five. Sedentary, lightly active, moderately active, or active, I'm moderately active. I'm gonna see my plan. And you can see it's now actually giving me my daily energy expenditure plus my daily calorie target. So that looks pretty good. Not exactly rocket science. I can also adjust this at any point in time in settings.
2:27:59Let's go. So now I have, uh, you know, the same calorie tracking functionality I had earlier, except I can actually click in on this. And you can see the name and the calories, protein, carbs, fat, but I'm not seeing the image. And I think the image is important. You know, we'll probably end up storing a fair amount of this, but I can imagine how, you know, we could easily compress the image so at least, like, there's a picture of something, the the thing that we sent.
2:28:19When I click on one of the preexisting entries, I don't see the image. This may be a bug. It may also be a storage space consideration, but ideally, I wanna be able to see the image that I took. We could do some compression to minimize the total amount of storage required. In fact, that's probably what makes the most sense. K. So I'm just gonna add all of this live sort of while I'm doing the rest of the check because that way we can bundle up and, you know, be be efficient.
2:28:44And here, can actually move through the various days of the month, which is really cool. And we here's we can actually see, like, the the total number of calories that I've tracked. In the calendar section, um, I like the little pop up that occurs when you click on a day that has some some logs, but I also like you to show progress, um, of the day. So right now, we have total number of calories, protein, carbs, and fat, but I wanna show how much of that we ended up locking of the goal for that day.
2:29:11Okay. I'm just gonna feed all of that back in and then we'll go to settings. And now this looks pretty good. We actually have a little daily goal section with the notifications available on iOS Android only. That's cool. So if I click this, you can see reminders at eight, 12:30, and 06:30. That's really cool. We should also be able to adjust our reminder times so that, uh, you know, if somebody eats breakfast a little late or something like that, they can also, uh, customize their push notifications.
2:29:35So I like that. That's pretty sweet. I wonder if we could also just, like, create more reminders in general because, uh, some people have, like, snacks and some people have other things. Alternatively, we could just have, an end of day log sort of deal. Uh, you know, offering people some flexibility in an app is important. You don't wanna offer people too much flexibility.
2:29:51I also don't really like the design on today's log, but that's not a big deal because I'm gonna run it goes through a big, like, design, uh, flow later. K. Cool. So it looks like we have a bunch of, uh, changes here. So I'm just gonna click on this, I'm not seeing any entry here, so I'm what I'm actually gonna do is I'm just gonna delete this. And I'm noticing that when I click the delete button, it doesn't actually delete. When I click the delete button on an entry, uh, when I full screened it, it doesn't actually delete, so fix that.
2:30:16You know, this occurs for a variety of reasons. Um, but, you know, I'm unsure of whether or not that's just like a simple UX thing. Yeah. It looks like it's just a UX thing. Um, for whatever reason, when I clicked up in the top right hand corner, it didn't show up. But when I clicked down there, it's fine. So now I'm just gonna go and I'm gonna add some more rice and chicken. Now let's do a a meal analysis.
2:30:33And just because it's refreshing, it's sending it to the API a couple more times, so I'm just gonna log it. K. Now that I've logged it, I can actually click and I can actually see the image. So that was either a temporary problem or a problem because we kind of refactored the app, but this is what I wanted. Right? I actually wanted to be able to see And actually, I think they compress the image automatically, which is quite nice. Notice that. So that's lovely.
2:30:52Okay. Great. And then, yeah, over here, they're currently implementing the, um, calorie proportion feature, so it's gonna show proportionally. And then we have the ability now to customize the meal reminder time, which is kinda cool. So breakfast, lunch, and dinner, that's very, very sweet. And, yeah, you know, the goal, as mentioned, is to be opinionated.
2:31:09Not so opinionated that, you know, the user feels really locked in, but pretty opinionated. You you do some of the thinking for them. And this looks pretty solid. So can actually see, like, the historical tracked logs. Because there's no entries for the day, kind of failed. Right? But this day, we actually had an entry that worked. Cool. So I like this. I I think that more or less what we've done here is great. There's just one more feature that I wanna add for the core loop, that's where I could see some some situations where somebody might wanna go
2:31:35back to maybe yesterday and then log. And I don't currently think we can because I don't think we can change the day. There's one more feature I'd like to add. I want people to be able to go back in time and then add logs, entries to specific days. I think that's a pretty common need. Say, I forgot to add stuff today and I said, I'm sorry. Forgot to add stuff yesterday and, you know, it's the morning. I wanna be able to go back and add everything for the previous day. So add some way to change the day that we're currently on on the today page so that we can kind of, like, go back and forth. And rather than call it today, call it, like, dashboard or something like that so that the user has the ability to kinda modify the date.
2:32:10Um, they'll be able to do that, and then they should also be able to actually add entries on the progress page when I click in a specific day because that might be a little bit faster, uh, for some use cases. Finally, provide the ability to delete, uh, different reminders and then customize what they're called in addition to their time. So for instance, if somebody only eats two meals a day, maybe only breakfast and lunch, he should be able to delete the dinner entry. Cool. Looking pretty good. If I go back to Chrome here, you can see that we now have the additional functionality of being able to change the day. And at any point in time, I can click this button and hump and jump back to today, which is really cool. So, you know, I could go back to the sixth. I could log the exact same meal here. And you'll see that, like, the calorie consistency is very similar. Six twenty, 38, 52, 26. I think that might have been '28 before, but this is actually hyper hyper consistent.
2:32:52So now I can add that to my log, and you'll see I now have that same meal, that roasted chicken, uh, on the sixth as well as today. And if I go to progress, I now have two logged entries, one on the sixth and one today, which is quite nice. And I can also edit this at any point in time. Maybe I want this to be 650 calories. I can save that. And then we actually have, like, some mild caloric differences. Although mathematically, this doesn't really make sense because you can't just add calories out of nowhere. Realistically, the protein, carbs, and fat change too. Still, I wanna give people the granularity and the ability to do that. Now we have our reminder set up, I can minus out the thing and maybe I just want breakfast and lunch and I want lunch to occur at 02:30.
2:33:24Uh, that looks pretty good to me. No major issues. And let's just double check that we can actually rerun the onboarding to update my goals. Looks like we can. Just wanna maintain the weight. This looks like it fixed itself, and I can actually see my plan. Let's go. And when I do that, when I rerun the onboarding, what's really important is it doesn't just re, like, jig the whole app. Right? I still have the logged entries from before. Um, it's just these logged entries have been updated with a new calorie totals.
2:33:46All in all, this is looking pretty good, and I'm liking where this is going. I'm still obviously gonna need to run through the testing of, you know, like, the ability to take photos and stuff like that on my phone. What I wanna do now is I wanna significantly upgrade the design. Because to me, this design is actually really stuffy and, you know, the dark mode apps are kind of annoying nowadays. I I don't know. I I like the Cal AI vibe.
2:34:05Now, what I'm gonna do is, you know, I just wanna copy this mercilessly, but I'd really do like the way the app is laid out. I think what I'll do is I'll just start with this as like my my little feature, And then I'll make adjustments to the design after this so that, you know, the end result doesn't end up just being a carbon clone or carbon copy. What I'll say is,
2:34:23I love the design of the app that I just screenshotted over to you. I want you to start by emulating that design. Right now, the design is pretty weak. I'd like you to upgrade it so it more or less looks exactly like this app does, just without some minor logo things. Rather than call it Cal AI, call it Cal Tracker. After we're done modifying the design and at least like building in like a reasonable
2:34:42library of components, etcetera, I'll modify the design so that the end result looks a little different. Now, I'm just gonna have that go. And what's really cool is the design at the end of the day ends up being a very you know, once you have the core functionality, all we're really doing is we're just changing the styles. We're changing the fonts a little bit. We're changing the colors in the background and stuff like that. So this part's much, much easier. And, uh, personally, I think that's Claude is significantly better at doing this. You can also use like built in, uh, libraries and tools like Claude Design in order to do that for you. Although, I think in our case, it's much easier for me just to proceed
2:35:14manually just prompting it and going back and forth. What I think I'm probably gonna wanna do is this is sort of like a black and white color scheme. I think I'm gonna wanna go not black, but like kinda like dark blue gray instead. So give it sort of like a cool gray feature. I think I'm also gonna modify the fonts. We have some serif fonts because while I like the sans serif font, I think a serif font would be really cool.
2:35:36And then I like how we have these emojis, but I'm noticing these emojis are sort of all over the place color wise. Think I'm just gonna do some sort of like monochrome dark gray, dark blue emoji. I think that's gonna look really clean. Um, this is cool. I mean, obviously, it's not identifying the specific elements in the in the photo, like, through our app. Um, but, you know, we can we can scan the food. We can take a photo of the food, and then we can upload it, and that's clean.
2:35:58I like this sort of modal or layout. You know, the thing about app design is it everything tends to be sort of rounded corners. And that's just because usually the phones that you're on have rounded corners and, you know, in case of an iPhone anyway, um, everything is sort of beveled and and has that clean look. We can also experiment with the rounded corner nature of it and and the color scheme. So I think that's probably what I'm gonna do. I think I'm gonna make the corners significantly less round because I wanna give like a higher lux feel. And then I'm also just gonna make all of the the icons monochrome as well, which should look a lot easier, a lot clearer.
2:36:27And then I see we have a couple of additional buttons here, which we didn't have before. But, um, you know, with the with the graphs and stuff like that, I think I'm just gonna stick to, like, that nice cool cool blue, um, color palette. And there's, like, a feature here.
2:36:44Well, not a feature, but a little tool here called the the UI colors app generate, which you can use to very quickly scaffold out some reasonable colors. So for instance, this is like a a color skin or scale for what looks to be like a lily sort of color. We can also do is at any point in time, you just press space bar and then you can customize it and change it. And so what I think I'm gonna do is I'm gonna go until this is like kind of like dark, you know, blueish.
2:37:09Maybe I'm gonna move this just a tad. So it's kind of on, like, the I don't wanna do, like, indigo, but maybe something like this. That looks pretty cool to me. And, you know, you can actually go through this whole website, let's say, and you can see how these colors work. Although, I guess you need to upgrade to pro for that. And, you know, this isn't a pitch for this particular service or website. I think I'll just stick with cards. But once I have this now, what I can do is I can actually just, like, copy all of these colors.
2:37:35This thing stops opening every two seconds. I can actually copy all these colors. K? And then I can paste that in and I can say, great. Update color scheme, so it looks like this.
2:37:47Also, make sure all icons, emojis are monochrome, e g they're of the same color as that palette. Important we stick to that palette from now on. Also,
2:38:00high end luxe style serif fonts rather than sans serif. Let's use serif fonts for the, your display display slash headings rather than sans serif and focus on
2:38:15reducing the
2:38:19corner grounding just a tad to make it feel higher end. Okay. Now, for anybody that doesn't know, a serif font is just a font that is sort of like a little old time. Like, is a sans serif font. This is sort of a new font. But a serif font, if I just exit out of this,
2:38:37is just a little twang, essentially. You see how this s, sans serif, would have just been, you know, something that looked kind of like this.
2:38:47Well, a sans serif is well, a serif is one that sort of has like these little things at the ends. And so, you know, design has sort of gone back and forth between serif and sans serif a bunch of times, but I like the idea of sort of a sans or sorry, a serif font for, um, headings just because I think it makes the app look kinda unique. Okay. So anyway, they've opened this up now and this is sort of our cal tracker. And you can see here the design is still lacking. It's not exactly what we wanted, but we're gonna continue modifying this until it gets higher and higher end.
2:39:15But I am liking what's going on here. We sort of have these little charts that are popping up. K. So it's looking a lot cleaner. And, uh, you can actually see the little calendar view on the main window now, not just on, uh, you know, the progress page. Now we're gonna modify all of the colors and stuff so that it looks a lot cleaner. And what I like about this is
2:39:33notice how we can actually see, um, the entire header here, and it only gets truncated when we mouse over it here. What I'd like is I'd actually like this to spill over. So I I like that we can actually see roasted chicken thigh with dirty rice. I think I'm probably gonna modify the prompt a little bit as well so that, like, the output of titles are shorter. Modify the prompt of the AI so that the outputted food titles are shorter, and then fix the truncation so that instead it wraps. Make sure the design looks really nice on the wrap too. So that, uh, you know, if we have a longer title, it still fits within the bounds of the card and nothing is cut off or looks weird.
2:40:09K. Cool. Yeah. I'm I'm really liking that now. And then if I go to profile, how's that look? It looks like we've lost some of the, you know, outlines or headings or cards or something like that because as we see here, these aren't really nicely aligned anymore. So I think it's probably just changed the colors a little bit without fully having screenshot of all the pages on the app and sort of like gone through that that feature in a sense. So I'm just gonna make a couple of additional minor, um, style modifications and so on and so forth, then I'll circle back when it's all ready. Well, it's definitely looking different. Um, maybe these serif fonts aren't actually a good idea or maybe it's just the specific font that I'm using because that looks kinda lame to me. I don't know. It doesn't look as high end as I was initially planning. And that's okay. We can change the design anytime we want. But notice how now the background has this kinda cool gray to it. Um, the home is still kind of compressed, would say, up top. I don't really like how compressed it is. Also noticing there's just different types of design. Do you notice how here there's no outline, but then over here there's an outline? What we need to do is we just need to fully,
2:41:01um, I wanna say harmonize the design. I'm noticing that there are slightly different types of designs on each different page. For instance, the homepage has an outline around each card, whereas the profile page doesn't have an outline around each card. I want you to remove outlines around all cards and favor clean minimalistic design over our busy design.
2:41:18Also noticing that the homepage is very compressed and kind of stacked up top. I'd like you to distribute each of the elements a little bit more organically, so that it doesn't look super stacked. And then instead of using a serif font like I talked about before, just pick a really good common, um, sans serif font, one that is typically associated with high end clean designs.
2:41:37Everything else looks pretty clean as it stands. Um, I also like the monochrome emojis and icons. This is just probably the major low hanging fruit here. Now on the entry page, I'm noticing that some of the text is overwritten by the div. So just make sure that when you do a test, you actually run through every single page, take a screenshot of it, and, um, itemize anything that may be suboptimal or sub,
2:42:02uh, you know, below par before modifying it on your own to make sure that it's as clean as possible. Also, don't like the green button that, uh, is next to the meal reminders toggle. That looks kind of weird right now. So rather than making it green, make it align with the rest of the color palette. And in general, just go through one final time and ensure everything aligns with the color palette I asked for.
2:42:23K. We'll go back here and continuously loop back until we get a really nice design. Looks significantly better. I want you now to go through the design page by page, and then itemize and enumerate a list of all possible improvements you can make to make it higher end sleeker and more luxe. Self loop as many times as you need to implement all of that design functionality because it's still looking just a little tight and rough around the edges. Also, add weight cleaner icons for the home, the progress, and the profile tabs down at the bottom. Those are pretty low end right now. Also, add some daily weight tracker chart that you could see over time like Cal AI. Continuing to modify the design, but we're getting pretty close. This is now looking really clean. I like the profile page. Notice how, um, these divs are now really nicely laid out. Color scheme makes perfect sense. This is like a dark blue instead of a a pure black. We still have a weird green toggle here, but, uh, I'll fix that up. Progress is also looking really clean. You can see how now all of the colors sort of reflect this monochrome look. And this page here, despite that being kind of a compressed image, um, just looks really nice. We don't have any, like, weird text that's laid out and and so on and so forth. We can also remove entries really easily just by giving these buttons quick clicks. In the actual, like, UX, when I click this button is, uh, is nice as well. So you can see we now can modify the protein, carbs, and fats, and the calories are sort of up here instead. We have the ability to fix our results by basically just rerunning saying, hey, something is wrong here.
2:43:41And once we're done, we get a nice beautiful little animation. If I go back to the homepage here, I'd say this is probably the biggest issue because it's also the first place that users will see. This is looking a little crammed and then I don't like how small these are right now, but I do like how we've now modified the colors and we have cute little icons.
2:43:56So all of this stuff is just, uh, you know, a couple of prompts away as you guys could see. Not that big of a deal. Um, this little plus button here can add a meal. I think realistically, we should also have the ability to, um, track weight. So I actually asked it, hey, you know, can you add a weight tracking feature? What I think we'll do after that is probably add, like, a weight graph right over here that is some sort of, like, a line chart so that you could see your weight go up or go down over time. Um, because we're modifying it right now on, like, the design level, the database and stuff like that is really easy to to change because it's all local. If we were to try and make all these modifications after we have like a actual live database, every time we do this, we have to push to like a new schema inside of Superbase, which just take a lot of time, energy, and then also consistently
2:44:36deprecate any old data. So we'd also have to add like a big chunk to our testing loop. So it's kind of annoying. Not not a fan. I'm seeing that this still isn't really getting fixed though. Notice how this just modified it and kinda push it into the middle. I feel like it's probably fundamentally misunderstanding something. So we should do some sort of screenshot testing loop here. I think what I'm gonna do is I'm actually gonna have it open it up in Chrome DevTools instead, and then just test it all end to end. That way, it can go through this cycle autonomously and then fix the,
2:45:03you know, the fact that these these cards aren't fully laid out. But right before that, just gonna take a screenshot and I'll say, make the protein eaten, carbs eaten,
2:45:15and fat eaten section,
2:45:19Let's say circles much larger so that we don't have weird spacing. Right now, it's not left or right aligned. Should be proportional
2:45:31to the page so that the padding e t c is fixed left and right side. Cool. And, uh, you know, at this point, I'm really just dumping in changes as time goes on. It's, uh, a very simple and straightforward for me. Uh, and I do a new change usually while it's still implementing the old change because those changes tend to be pretty separated. So now, for instance, I see this plus button. It doesn't have a ability to log weight. I'll say add weight log feature to the plus button
2:45:56So that when somebody clicks the plus button, it's in there. This is looking better for sure, but we're still a little bit off. I don't like that. So what I'm gonna do is I'll say, great. Now open up in your own Chrome window and screenshot through the app. Enumerate all of the minor incongruencies
2:46:16in design, so like spacing, margins, alignment on left and right sides, e t c, and then fix each in turn, e. G, the calories eaten
2:46:29and then macronutrients section is still out of alignment. Want this fixed on a, I don't know, you know, mobile respond you know, in a mobile responsive way.
2:46:43Cool. From here on out, can log the food, we can log the weight. That looks nice. What happens when we okay. And you can see we're actually going through this whole process, which is very nice. You can see it's now modifying this actually on its own. So I'm just gonna duplicate this, and then we'll have another window open over here, k, which is kind of my own. And I'm just gonna, you know, do what I'm doing on on the left hand side here while it does what it's doing on the right hand side.
2:47:03So I don't know. Maybe I wanna gain weight. I have the ability to enter all this information in. Looks pretty clean. See my plan. And then over here, we have, you know, the the three sort of calorie and protein, carbs, and fat, uh, recommendations. That looks pretty cool. And then what happens when I log weight now? Looks like the weight log is an issue. So when I click weight log, we can see that this clearly extends a little bit too much over to the right hand side. And I imagine that's because this width is just fixed, which is an issue.
2:47:32So we'll back over here and I'll say, some issue with the weight log feature right now. When I click the button, the field spills all the way over to the right hand side. It doesn't really look responsive or dynamic. Okay. Cool. And it's just actually going through and, you know, testing and so on and so forth. This page right now, which is kinda clean.
2:47:50But anyway, let me actually test that functionality. We'll say a 175 and all safe. And then we need to log at least two weigh ins to see my trend. So could I log a 176 now? And then we could kinda see this change over time.
2:48:06No. It doesn't look like. I think we're gonna need to actually log two in two separate days. So, obviously, we're gonna need the ability to log the wait on a different day as well. I think probably what we're gonna wanna do is we're gonna wanna add the recently uploaded or recently logged, and then have this be both a combination of, um, food and weight.
2:48:21For the recently uploaded section on today, make it so that it's recently logged instead of recently uploaded, and that we have the ability to log or rather, it has the ability to list both meals and also weight. The idea is right now, we we should be able to log directly from the home page. Instead, the ability to log weight is buried in the progress page and stuff like that. There's really no need to make this overly complex. Just have the ability to,
2:48:47um, you know, log weight with the plus button and then have all of that appear under recently uploaded. Also, we should be able to change the date that we're logging weights because we, again, may want to historically log our weight a couple days ago or something like that. And while we did that, you can see it actually fixed these little macro circles, this is now looking a lot cleaner. I'd go as far as saying, like, this is now, you know, about as good as you can realistically get. I think there's some minor issues, like, when you kinda scale back here, and this text is still kind of,
2:49:12you know, very, very what's the term? The tracking is very tight. That just means, like, there's very little space between each element. Also noticing that this card doesn't fully, you know, spill over, which is unfortunate just given the fact this is now on three lines or so. I think ideally what we'd want is we'd want the calories and then the macros to be right next to it in a case like this because then we'd actually be able to make the card smaller.
2:49:33But at the same time, you know, we are it is clearly trying to respect the fact that I said, hey, I want you to, like, spill over the line as opposed to go all the way out. So I think what we'll probably have to do here is we'll probably need to, on really tiny displays, just like really compress the hell out of everything. On really tiny displays, uh, we should
2:49:54find a way to showcase all of the information, aka calories, uh, protein, carbs, and fat under the recently logged section such that the car doesn't get super tall. Right now, we're spilling over onto four lines like the following, which is very suboptimal
2:50:11and, uh, inefficient. Instead, you know, if we're on a very small display, I want you to come up with a way to showcase all that information on two lines max. And that includes both the title and also the, you know, actual, like, calorie info. K. And I'm realizing here, just did that by accident. So now I'm filling that in. Notice how long this is for instance, and how ugly that card is. If I click this button, can I log the weight? Okay. And I see it actually goes today, May 6. So, uh, one more feature I'm gonna do is if I'm on the, uh, let's say, May 6 day and I click the plus button, the wait log should immediately jump to the May 6 day. It shouldn't default to today. Uh, it should basically default to whatever day the homepage is currently on. K. That looks pretty clean as well. And then over here, we we do have that truncation. And I guess that's sort of the way that it came up with things.
2:50:59I'm wondering if there's a way just to get like the calories down below as well. I don't want any truncation. Maybe you can truncate a little bit longer. Sorry.
2:51:11Okay. Let me make sure I 100% know what I'm about to say before I try and direct this AI. Because at the end of the day, I am spending tokens and whatnot. So what exactly do I want? Well, I want this title, k. Can be a little bit longer, but I basically want this calorie line to be down here. And then I want all of these compressed. You can truncate the text, but do so significantly
2:51:31wider. And then combine the calorie and then macronutrient lines using a smart combination of abbreviations, compressed text, smaller text, ETC.
2:51:43Do whatever you need to in order to ensure that you could see maybe double the current number of characters on that top line. Um, and then I'm noticing now that we have the ability to log weight in addition to, uh, log food, the little profile pics and images are slightly off. They're not perfectly aligned, so I think the padding on those cards or the spacing is, uh, is different. I'd like you to realign
2:52:09the logged calorie entries so that they perfectly match the size,
2:52:15width, and then layout of the weight log entries. Cool. Stick that in as well. And, yeah, the rest of the stuff looks pretty clean. Okay. Now, this is correctly identifying sort of May 6. If we go back to progress, you see now we actually have a chart, which is nice. So why don't I go back here to May 4, log the weight, and just pretend that I was significantly skinnier.
2:52:35Let's go back to progress. And now you can actually see this is this is rising over time, which is quite nice. We can zoom out to three months, six month all. Uh, presumably, we can't see that right now because we only do have three weight entries. Um, I think the last thing we need is we just need some sort of x axis. We need some sort of x axis to the graph for weight log right now because we don't currently have that.
2:52:54Oh, and, uh, one more thing. Under profile, the meal reminders button is still green. The meal reminders button under profile, the little toggle is still green. Just make it a shade of blue, similar to the rest of our color palette. Cool. This looks way cleaner as you can see over here. And if we go under progress, you can see we actually now have the dates logged. Although this is with, um, Serif fonts, so I'm gonna make one minor change.
2:53:17The x axis is with Serif fonts. I want sans Serif. Okay. And now we have the finished design of the three pages, the home, the progress, and the profile. As you guys can see, this is now populating, you know, as I go through each of these. We have everything nicely aligned. We, unfortunately, were unable to fix the truncation. Like, to me, this is still just a little bit too close. But, um, I looked at the aspect ratio and then also the total number of pixels, and most phones will be somewhere like this between the two. So we should be able to see the protein, the calories, and the fat down there. Uh, if you get under the progress page, we obviously now have the the weight progress. Everything's really clean on that end. And then we also can, you know, x out or jump directly into different logged entries and stuff like that. And we have a much nicer kind of looking
2:54:04flow, I would say, alongside the breakfast and lunch reminders. So this looks pretty good. I mean, I'm probably not gonna wanna include the Anthropic API key in the final product. If you think about it, like, it's kind of like my job is, the app dev. Your requests are passed through my Anthropic API key. I pay for the usage, and then I just charge you a monthly subscription with, like, enough margin to make, uh, make me some some delta. But, uh, you know, I'll just leave that in for now just to kinda keep the app customizable and see where we go from there. Oh, and then finally, that plus button, think, is really clean. So now that we test all the stuff locally
2:54:33and have verified the design as I like, we can actually, like, you know, push through and and do that next step, which if we go back over here to this big Excalidraw, k, is all the way over
2:54:46here now, which means we just tested it with our computer. Now we have to test it with the phone mirror, and then finally, I'm gonna do a phone reel. Uh, this is obviously pretty intensive and I don't want you guys to sit around just watching me do a bunch of testing and and minor edits. I think the design part was instructive, but from here on, I'm just gonna test it on the iPhone mirroring app on my end, then I'll circle back with any adjustments or problems that that I had. Okay. Just wanted to show you guys, this is it is so clean. It's basically exactly what I wanted. And I just tested this with my phone and the the the haptic feedback and all of, the little interactions were really, really nice.
2:55:17But yeah. I mean, the layout on this is just absolutely gorgeous. I think this is probably one of the nicer apps that I put together in a pretty short period of time. Um, you know, I am noticing some minor asynchronies like, for instance, uh, sorry, incongruencies where the left hand most aligned part of the height and the weight and stuff like that are not aligned with the text underneath. These are minor changes that I'll do, uh, that I just couldn't see until I was actually on my phone. But, um, yeah. I mean, like, this is really clean. It has more or less the exact functionality that I want. What's really cool is, um, unfortunately, I don't know if I could show you guys the camera feature, but the camera feature is is really cool, the the UX and stuff like that is. Because I'm using the iPhone mirroring app, um, I think this is gonna bug out. Yeah. So I'm unfortunately not able to show you guys, but, um, very cool. And, uh, you know, you can take a photo of your food. And when you do so, it it it has the exact same UX as what we saw with, uh, the Chrome version of uploading a photo.
2:56:06The stuff like this and this minor UX change is just so awesome to see somebody that, you know, put something together like this in fifteen or twenty minutes. Cool. So now that I'm done with all of this, we sort of have to do that next step, which is add a database. And then after we're done the database, we'll have to run another test and a security audit, and then finally another test before deploying. Um, the database is gonna be pretty simple, same idea as what we had before. We're just gonna set up auth on super base, and then I'm gonna set up the whole DB stuff on my end, give it the keys, then they'll run away, uh, you know, implement everything.
2:56:35Now, first, before I go any further, I will say the number of tokens that I'm using in bottom right hand corner is getting pretty long. And it depends on what model you're using, but, um, typically, after like 200,000 or so tokens, the performance of the model tends to decrease significantly, and your ability to make minor kind of granular changes, uh, goes down. And so, generally, my rule of thumb is, like, if I'm at, like, the 250 to maybe, like, 300,000 mark, I'll usually perform what's called a compaction before going any further.
2:57:00And that compaction is pretty easy. You just go slash compact. What occurs is it gets all of the history in your whole conversation and then it just like compresses it. You know, instead of using words like fixed, the app now explicitly requests camera photo library permissions, it might go fixed.
2:57:17App asks for camera slash photo perms before launching picker. And notice how like this still has all the same information as this. It's just, I don't know, 50% as long, maybe 60% as long. So we get to save that 40% and basically bankroll that, and that improves the performance of, um, you know, Cloud on the next iteration, which is quite handy. The downside of this is it takes a fair amount of time. So while it's doing that, I'm gonna go and set up Supabase.
2:57:42Same idea as what we were doing before. I'm just gonna go start a project and then, you know, we have have a tracker app over here. I should be able to start a new one, I believe. Yeah. It looks like I can. For project name, I'm gonna call this cal tracker. Then I'm just gonna use whatever the default password is here, I'm and just gonna copy that over. So use strong password copy. And then remember to enable automatic RLS anytime you're doing this because, um, that's just one of the lowest hanging fruit security upgrades. This wasn't actually here before you had to do a bunch of back end coding stuff in order to get it up and running, but so many, uh, like, vibe coded apps had gotten totally leaked that, uh, they just decided to add that. And honestly, I think they should just make it a mandatory thing. There are a few instances where, you know, you you can't really do that, but, yeah, think like they should just default to that and then RLS should be like opt out, not opt in. Alright. The end result is super clean. We now have this working, uh, functionally on both our database and then also our local. So if I go to profile here and then sign out, you see we now have a pretty clean, uh, login page. I won't say this is perfect, but basically, I went on this website here, Dribbble. And then I found a couple of sign in pages that I liked. And then I just fed one, in particular, this one, into Claude saying, hey, can you build me something kind of like this for my sign in page? Uh, and the end result is, you know, this. We got these cute little calories and weights and stuff like that going up and down, and it's nice. And I already have an account, so when I sign in, uh, we just jump directly into the app. And there there are a couple of issues I've noticed, like the onboarding flickers very briefly. Uh, I'm gonna fix all that right now with Claude and that's actually what what it's doing in the background. It's fixing some of the minor usability issues now that we have a database. For instance, if I reload this page, you notice that it takes a second for this thing to toggle, and that's because it's actually pulling that directly from the database. So I don't want that to take a second, you know, I just want it to be cached. So I'm gonna go through now. It just implements some additional app functionality like you guys have already seen me do. Now, I have it doing is I'm having it loop over repeatedly,
2:59:30and then open up every individual page in the app. Just fairly easy to do. You basically just say, hey, I want you to open up every individual page of the And then ideate small improvements that it could make to the usability, and then the speed by which the app loads and then works. Um, this is sort of a a meta system where the AI is now doing both the ideation and the implementation for me. Then I basically just, take a quick peek at everything after all said and done and verify whether or not it's good. Um, and as you could see, it's now adding styles for water and weekly cards and and stuff like that too. This is a form of accessory functionality. Right? Like, as favorites is not something that I necessarily need the app to have. But, you know, I wanna polish it up before I actually end up submitting this to the App Store. So I want this to have more or less everything that I think an app would realistically need to be on par with or on the same level as KALL AI. And it's all just a byproduct of token usage. Right? I have this running relatively autonomously right now. It's been 24,000 tokens spent for almost six minutes. You know, if you can budget that level of token spend, you can basically trade your money for tokens for time, and then get that time back to do whatever else you're doing. Now, while I was using this on my phone, I found that it was taking a little while longer than I wanted it to. I noticed that every time I log something,
3:00:39it would take like a good seven hundred milliseconds to maybe a second in order for that log to go through. And that was just annoying to me. I don't want this to take a very long time. I understand that you should know that any calorie tracking or whatever that I'm doing on my Chrome is always gonna occur faster than on my mobile simply because I have way more processing resources on hand on my computer than I do on my phone. So generally, whatever it feels like on your computer, it's gonna feel twice as worse on your phone. And, um, when I moved over to my phone, I I found that. So what I did is in addition to asking it to assist me with design and so on and so forth. K. Right over here at the very top, I also asked it, hey,
3:01:17what and it looks like it just knocked that out, is unfortunate. Hey, what sorts of changes are currently contributing to like the very long load times? And you can see that, uh, it looks like most of these now are significantly faster.
3:01:32So this one here, for instance, went from 417 to to 399. This one from March to March. Uh, but it looks like, you know, ultimately speaking, we had some improvements. I think
3:01:43because we're doing a single call to the database or something like that, it's gonna save something like six hundred milliseconds on cellular. And then I also had to do a a little full reload test to see how fast all the stuff is. So, um, how much faster is home now that we've done the improvement? It looks like we're getting it down from 355 to like 221
3:02:03or something like that. Yeah. Average time of 254 down to two hundred nineteen milliseconds. So we basically made the entire app a good, like, 14%, uh, faster. And then it's suggesting that on, you know, some form of, like, LTE or something like that, we went from five hundred and sixty milliseconds, which is about half a second of pure network latency. That's kinda like what I was feeling, uh, before. It's about eighty milliseconds of network latency, which is about half a second saved. So, I mean, that's that's really more or less what you need to do if you really want it to work, like, super snappy on your phone. You need to trade even more tokens in order for some some optimizations like this. But the issue is because I've now kind of made a couple of changes to the core thing while I was testing my phone, I have to go back and I have to test it all over again. So what I'm gonna do now is I'm gonna roll it back. I'm gonna test it fully end to end on the Chrome, and then I'm gonna do iPhone mirroring, and then I'm gonna do my phone. It is annoying to have to do this over and over and over again, but there's just no other way to fully know. Uh, my goal is, you know, I want this thing to be basically publishable ready at the end of my about. I don't wanna have to send this off to some QA team or anything like that. I'm doing it all myself with Claude. Um, so I'm just gonna give it another maybe ten or fifteen minute test, and then I'll let you guys know where I'm at. Okay. And I just tested this end to end. It's looking really clean, but there was one tiny thing that wasn't working, which is, uh, the bar at the very top of the page, which is now black, was white. What I mean by that is those little icons like my time, uh, my battery, my WiFi signal, and my cell signal, those just blended into the background. And it's one of those things that, like, you just can't know until you do the full end to end test and actually run through everything on your phone. So now that I've fixed this, just by saying, uh, hey, you know, my iPhone's native top bar icons are white, all this stuff. Is there any way to fix? How do I force the colors? You know, without me having done so, I never would have actually got at this point. That would have been like a serious clear usability problem. Now that it's fixed though, it's it's really clean. And you can see that the camera's in use and, you know, everything is basically, uh, actually totally functional now, which is quite awesome. Also, uh, because I don't have a giant plate of steaming rice in front of me, what I did is I took a photo of my screen with all of that on, and that's just confirming that that still managed to work. Although I did, for some reason, get slightly lower fat ratings and more protein. So, yeah, it's a hell of a deal. If you want more protein in your diet, just take a photo of food on your screen instead of in real life.
3:04:09Okay. So with all that said, we now have done more or less everything that we need to do to actually push our app live, except for probably the most boring thing, which is the security audit. The good news is the security audit, as I've shown you guys with the previous app build, is very simple and it's very straightforward. So all I'm gonna do is I'm just gonna start by clearing all of my, um, conversation history. So I'll go back slash clear. K. And so now we're basically starting a new conversation, which is why the tokens are down to 0%.
3:04:36I'm gonna go back to my app or my Chrome, and then I'm gonna go and search up security for Vibe coded apps, k. Which is the, um, asset that I've given people in previous courses that basically runs through this big security audit. And just like I did last time, I'm just gonna copy this puppy, paste it in, and I'm making sure it's a new prompt. K? I'm just gonna have it go end to end, analyze everything in, uh, you know, this repo, and then give me those changes. I'm not gonna have you guys be on the end of the line for this because, again, I feel like you you probably understand the point. Just AI running through everything in a very comprehensive sort of line by line security basis. And it just ran through a final security check, as well as a general sort of functional QA audit. Uh, what I'm gonna do now is I'm gonna do that three test sequence starting on my computer with an iPhone mirroring, and then finally expo on my phone. And that's that. Now that we've done everything involved in creating an app that has AI functionality,
3:05:29HOOKwhy don't we wrap this up with a third app? This one's sort of gonna be a mixture between the habit tracker and then the AI tracker. A very simple and straightforward Pomodoro or time tracking app that I'm gonna implement some cool design stuff in. In short, we're gonna have something that grows as our time tracker goes up and up. And I also want you to know you don't just have to do a tracker. I've done three versions of trackers now, a habit one, a calorie one, and then also a a time one. But trackers just happen to be one of the easiest and simplest ways for me to show you guys how all this stuff works under the hood. Uh, with all that said, let's get into it. Alright. So my next app is going to be a Pomodoro app. For those of guys that don't know, there's this whole idea of, uh, Pomodoros for productivity. And a pomodoro is just a twenty to twenty five minute uninterrupted work block,
3:06:13HOOKwhere you just sit down and get things done. And the idea is this is how you train your focus and your ability to remain productive over long periods of time. You do a twenty minute period to take a five minute break. You do another twenty minute period and so on. The next week, you do a twenty five minute period and then a five minute break, and then another twenty five minute period.
3:06:30HOOKAnd, you know, you eventually just build that up. So I'm just gonna call this a Pomodoro app. K? And just like we went through the whole app design framework for the Cal AI look alike here, I'm gonna go through the whole app design framework for the Pomodoro. I'm just gonna copy that over. K. Kinda stick it right over here. Maybe move that up so that it doesn't kinda get in the way. And then, yeah, you know, just like the one thing for calorie tracker app was the calorie tracking. The one thing for the Pomodoro app, just logically speaking let me just copy this to make my life easier.
3:07:00It's going to be, um, timers, and it'll be like adjustable timer. And so you'll be able to set, you know, like a twenty or twenty five or thirty minute timer and increase maybe the length of that over time. K. The core loop, because the app is so simple, we're gonna need something cool to kinda keep people coming back.
3:07:18And so the core loop in this case is going to be, you set the timer. You, you know, I think I think we're gonna start with planting a tree and then you watch it grow and then, you know, it like dings when you're done and then it looks awesome. The whole idea here is because the actual app is so simple,
3:07:37we're gonna add like a tremendous amount of visual polish and appeal and kind of add like some cute interactivity that despite not actually being like a feature, it's just gonna keep people actually like on the app. And the whole idea is like you're gonna take your phone, you're gonna put it kind of on your desk, you're gonna click the thing and something is slowly going to grow, let's say, as you go through go
3:07:54through that Pomodoro. And we see this a lot with apps nowadays. They like the idea of you growing and taking care of something. It's kind of cool. You plant a tree and and so on. In terms of accessory features, we'll definitely need a few. So I want the ability to like map Pomodoro or maybe log Pomodoro no. Track progress. Let's do that. So you can see your Pomodoros,
3:08:18basically have like a log of them and so on and so forth, similar to what we had previously. And then you should also have the ability to, I don't know, like change the thing you're growing and maybe like earn levels and and colors and ETC, you know, some sort of award for growing your your tree longer than other people. In terms of the surface area, I don't think we're really gonna have much more than just like the growth screen and then maybe like the
3:08:40I don't know. Maybe like progress or tracking or log or something like that. Maybe maybe just growth and then log. I think that seems pretty cool. And then the retention hook is just going to be you getting checked in with. So maybe like daily check ins about your productivity and your performance. Uh, hey, you know, if you wanna keep growing that tree, then circle back. You haven't logged a thing in a certain amount of time.
3:09:02Because that that seems pretty simple. And then, uh, I'm actually just gonna walk through this whole thing left to right and do a very good job of that the last time. So actually, I'm gonna walk through this whole thing left to right with you guys, um, and kinda check everything off as we go. Alright. So what does that mean? That means that we have now kind of finished our MVP ideation and so we sort of have the MVP all laid out. All we have to do now logically is we have to, uh, actually give that to Claude. And so the first thing I'm gonna do is I'm just gonna go back to my anti gravity instance where, uh, I was setting up Google Play developer and then console registration and then some other stuff for the Cal Tracker app because I wanted to submit that to the App Store.
3:09:37Then I'm just gonna go up to the top here, go new window. Now, I can just open up another window. Then here, I'm gonna call this Pomodoro app. Okay. And then I'm gonna open and now we're inside of the Pomodoro app, that's why it says so in the top left hand corner.
3:09:52And just double tapping on this, opening up my little cloud window. It's kind of annoying how many steps you have to do. You could also open it down here, but I just think this is faster. And then once we're here, now I can just say, want to create a mobile app using React Native and Expo. Set up the workspace for me, assuming I intend to launch both Android and iOS versions.
3:10:15K. So now we're just gonna have this run through the setup just like we did the other couple times, build out our little scaffold. And then once we have the scaffold, I'll actually add all of the functionality needed. I'm building an app with a five step framework of core function, core loop, accessory features, surface area check, and then retention hook.
3:10:32The app that I'm looking to build is essentially a Pomodoro style time tracker. The core function will be the ability to track time and then adjust the time that you are tracking. Tracking. The whole idea being this app will help improve your focus.
3:10:46Now, the loop is going to be highly visual based. What I'd like is I'd like a function where when you start a Pomodoro, you're basically planting a seed. And then over the course of the Pomodoro, the seed grows into a full tree. This needs to be very visually stimulating, looking acute, and be in a particular visual style. I I kind of want this to look almost like an like an anime, like an animated sort of TV show.
3:11:08When it's done, you know, I want the phone to sort of vibrate, so I want like haptic feedback. I also want, you know, bunch of visual stimulatory, uh, kind of functionality. For accessory features, I want the ability to track our progress as sort of like a log. Basically, as the user does more and more and more, uh, Pomodoros and then gets more focused, I want the
3:11:27progress bar to show them improving in both their times and so on and so forth. I also want the trees or seeds or whatever feature we end up on, uh, to change. So I want like different colors. I want the trees to change in nature, maybe progress through like a different series of trees. I want you to earn levels and and colors and stuff like that. For surface area check, I really only think we need two main screens. Maybe a growth screen, which is where you plant the seed and then it grows and, you know, begin the Pomodoro session.
3:11:54And then some sort of log where you can see progress over time. I don't think it needs to be more complicated than that. Uh, and then the retention hook, the thing that's gonna keep them coming back is gonna be a daily check-in. Where if you don't come back, let's say, you know, in a seventy two hour period, then your trees start withering and and dying. And maybe you plant one tree, uh, for every Pomodoro session and the whole idea is you'll eventually build a forest.
3:12:18Okay. So I just did that, uh, while this was building. Uh, so what I'm gonna do now is I'm just gonna press enter here and, uh, you know, I'm just gonna have this thing run through the build full end to end. Now, what this is doing, which is a little bit different this session than the previous ones, is actually going through and planning and then also
3:12:33exploring the project state and then researching some animation libraries. And it's doing so using, uh, what's called their sub agent teams feature. And you can see that actually just exited. But basically, we have like a main thread, which is what I'm running right now. And then we have another sub agent that's, um, operating alongside us. And this one is researching React Native animation libraries. Now, every time this finishes, it'll collapse back to the main thread.
3:12:54And then, you know, just give as much context as humanly possible to the the the main agent that's sort of listening to us. Now, in addition, you can see we've also switched over to plan mode, which is a little bit different from, you know, the other sort of one shot modes that we've operated at before. And Cloud will do this from time to time. They'll typically use plan mode when it needs a little bit more information from you and it intends to ask you some questions. And so you guys can see here, it's asking me some questions. So it's saying, for the tree growth animation, should the tree grow in real time as the counter counts down, e g at 50% time, 50% grown, or should it be a premade animation that plays on completion? And we want real time growth for sure.
3:13:30For data persistence, uh, session history for state levels, which approach should you prefer? I want local SQL lite. That just means doing it all locally on my computer for now. What default Pomodoro duration do you want and should users be able to customize? It will be twenty five minutes And then we can actually submit all these. And you'll see most of the time, it'll actually, uh, just like recommend an option. And in this case, all of these recommendations are what I initially wanted. But, you know, Cloud wanted to make 100% sure that if I wanted something else, we could get it done now, uh, as opposed to later after we're done with all the the token usage. Okay. So now it's going to actually go through, you know, building this SVG that grows. SVG is like sort of a design, and we'll see how it looks. I don't actually have high hopes for the design functionality yet. I think we'll probably have to go pretty in-depth there, but, you know, if it could one shot it, uh, that'd be that'd be fantastic and very much preferable. Cool. And it's already opened up the little app here. Uh, I had it use Chrome Dev Tools MCP, which is a tool that allows it to take screenshots of things as it does the building, and that's what's going on right now. You could see it's stuck on the loading page, so it's just gonna fix that sort of while I'm explaining the way that this app works to you guys. And so we have two pages, you know, we have a grow page and then we have a forest page. And I actually like this. I think this is split up a lot better than, uh, you know, what I was considering previously.
3:14:42The grow page is obviously gonna be where you log a session and then it's gonna grow. And then the forest page is presumably just gonna be a big list of all of the things that you've, you know, all the trees that you've sort of grown before. Now it's very simple. This is not like a high quality sort of s s v g animation, at least as it stands. You could see this is sort of off to the left and so on and so forth. So we're just gonna make a couple changes to the app, make it all small and then, yeah, can kinda continue working our way through this until we get it to a point where it like works. And once we've it to the point where it works, I'm gonna check that little built box and then move on to optimizing the design. Alright. So just taking a look at the app. We have an onboarding screen here. Just gonna make this kind of mobile y. This onboarding screen says plant a seed. You could see there's some sort of issue with this chart.
3:15:26After you plant the seed, you'll grow your tree. You'll kind of earn XP to unlock new species, and then you'll tend to your forest, and your forest look kinda like that. So this does look really neat. It's super cute. I like this. Couple of issues here already. One of the issues is, you know, this is obviously not big enough to encapsulate, uh, the content,
3:15:43or it may be that I'm just a little too zoomed in. But regardless, like, these things should not just be on one line. We should obviously have that spillover. Right? And then I don't much like the layout of this app as it stands anyway. So I mean, you know, if I go here and then make this a little taller so I can plant the seed,
3:16:01you can see that we planted the seed. The issue is I can't really see this grow. Right? So that kinda sucks. I'm just gonna give up. Go back to the forest page. You could see we have these sessions, number of hours that we've logged, streak, level one, unlocked, oak. This is cool. This is exactly what I wanted. A certain number of trees in your forest, then recent session. So what we're gonna have to do, like, just to really test the UX and stuff like that is we're we're gonna need just need to add a bunch of entries to the database. So I'll say, add a bunch of entries to the database that I could see what this app would look like if it was fully populated. We'll need to do this if we are in, uh, to, you know, adjust the design and so on and so forth. Anyway, this still looks pretty good. I'm pretty happy with the way that is. I'm just gonna go back to this Excalidraw and I think meaningfully mark off this build because, uh, you know, this has most of the functionality that I wanted. From here on out, it's just gonna be sort of a design loop like we did last time. Slowly and consistently upgrading the design until we eventually get to a point where, you know, we we love the way the app looks.
3:16:49Um, I'm also just gonna start voice dumping all of these minor changes, um, just directly into cloud as it continues to build. And, uh, you could see it's already started adding stuff to the database. We're at a certain level. If I go back to my forest here, you see okay. It actually doesn't look like we have all of this in yet, but we do have the sessions, which is nice in the EXP.
3:17:06So that's wonderful. I think this looks pretty solid right now. Forest is looking cool too. My main issue is on the grow page,
3:17:17the timer options of fifteen, twenty five, forty five, and sixty minutes do not are not currently responsive. Additionally,
3:17:27the way the page is vertically laid out is there's a tremendous amount of space up at the top that is empty until the tree grows. This makes the app look kind of ugly and weird, uh, until the tree actually goes through that that growth animation. And I don't want to have to scroll. Ideally, just want everything visible. So we need to find a way to make this app much more responsive for all different types of devices and then and then solve that as well. Also,
3:17:51because of the lack of responsiveness, the forests are currently cut off. EG, you can't actually see the tops of all of those trees, um, on the on the homepage. Additionally, I'd us I just like us to make the homepage significantly more visually engaging. Use best practices for, uh, mobile apps. Right now, we only have the level marker. We have the little fire marker, and then we have the the time, and then obviously the, uh, timer.
3:18:16But I think we'll need to significantly upgrade this both from a design perspective, but also like a font choice perspective, also like a usability perspective, and so on and so forth.
3:18:30K. So I do like this. I also like the trees withering aspect. So I think this is the trees that are withering. That's probably what those are. Although it says two trees and I'm seeing three, so there may be an issue with that database there. But, yeah, this is pretty cute. Ideally, what I'd like to do is I'd to significantly upgrade the design of all these trees because, know, as it stands right now, it's just a couple of circles. I think we could do so by
3:18:53maybe grabbing these assets from somewhere else instead of just making them ourselves. Um, that'd be nice. And then I think we should be able to click into the recent sessions too. Add functionality so we can click into a recent session. Right now, the recent sessions are sort of a log and that log is fine, but we actually wanna be able to click in on them and see. Also, add a graph of some kind underneath the forest section under a forest
3:19:16on the forest page, sorry, so that we could see that. Also, now, I'm seeing a notification that says two trees withering, but the actual visuals make it look like three trees are withering. We should identify the the withered trees a little bit better so users can see what's going on. And, uh, you should be able to interact with each of these things like a k, you should be able to maybe tap or nudge on the trees to make something happen. In addition, these trees should be animated. Right now, they're not really animated. It's just a a static tree. And despite how cute that is, the user's definitely gonna want, uh, it to be a lot more engaging than that. We also need to wait to see what happens when we actually make it to the end of a pomodoro. Right now,
3:19:53know, I'm just looking at this app on a static basis. I don't actually know what the tree looks like as it grows. So ideally, we'd want a way to trigger all of the animation states that I could take a look and then maybe help you modify them more granularly. And then I also want a way just to be able to trigger it finished. Dumping all that stuff in while it's continuing making other changes, you could see it's now adjusting, uh, the little EXP bar at the top. That's cool. And then it's also changing the the vertical spacing.
3:20:20Uh, it's making the forest sort of like fixed, which is nice, but obviously we are still cutting off that top. I think I'm actually just gonna like significantly change this design. Um, I mean, like, much as I like the way that it's laid out, I don't really like the colors and I I think we're gonna have to like really change the fonts in order to make this nice. So why don't I go over to our lovely friend Dribbble here? And then why don't we see, I don't know, tracker app? We do that.
3:20:43So like a time tracker app or something like that. Anyway, I like this. This looks really cool. I'm not seeing a time tracker app specifically. Some of these are alright. Oh, this one literally says Pomodoro. That's kinda cute. We might be able to make some use of that.
3:21:00Yeah. These are time tracker apps for sure. Just zooming in here. I like this. I like this design. Good mood, new day, fresh start. How well did you sleep today? It's kind of a sleep tracker, but do you notice how it's like it's got this nice sort of warm color scheme to it and then also we have these little graphs. I think this would be great from a graph perspective.
3:21:18This is the Pomodoro tracker, which is really interesting. Uh, I think this is probably a little too much. What's the next page look like? K. It's just a mock up. How about this one? Can we actually have the time tracker or tracking history, ongoing projects? No. I think this is probably, like, the best little design that I've seen so far. So let me just take a look at a couple other ones. Maybe just tracker app instead of time tracker app. That should at least show us more.
3:21:43Moody Area, that looks pretty cute like that.
3:21:48Just taking a look at all the possible options here. You know, I want it to be fun and sort of like, I don't know, like like youthful, like kid like almost. I like this. This is very cute too. You see with the sort of outlines here, that's super cute. Although, I I'm realizing this has more to do with the pictures than it has to do with anything else.
3:22:11What we could also do is we could have GPT image generate a couple of designs for an app like this, and then feed in those designs to Claude and have it try and reproduce and recreate it. That might be not a not a bad idea. Why don't I try that? So I'm gonna I'm just going to use a slash b t w feature here to allow me to ask Claude questions about this app while it works. So I'll say describe this app in a prompt feeding into an image generator,
3:22:34um, so it can come up with a an in-depth design, uh, you know, set of designs. Let's try that. Now, uh, GPT image two is one of the better AI image generators right now. So this can actually generate total, like, mock ups for mobile apps and stuff. And the idea is we're gonna take this this mock up idea, feed it to g p two GPT two image or image two. And then, uh, once it has this, we should be good. Okay. So I now just fed all of this in to GPT image and we'll see how it does. Awesome. We now have these designs and these look a lot cleaner. And this is more or less what I wanted. I wanted something that had, you know, fantastic textures.
3:23:11Uh, I love how that it's actually somewhat similar to our app right now, actually, with a little field and stuff. I wanna see this thing grow. Right? I think that's really important to me. This is the forest with a bunch of information and you can see it's actually kind of mimicked the structure and layout,
3:23:29which is telling me that really the thing that we're lacking is just like the visual assets right now. The the actual forest bit looks good. I think it's generated multiple of these. Okay. Yes. It has generated multiple of these. This this is really the main screen I think that we need to focus on, and then we could see it sort of grow in the background here too.
3:23:46I am curious how we're actually gonna implement something like that because obviously we're gonna need to sign like really high quality assets. I think what we could probably do is we could just generate each of these trees in a sequence and then maybe extract them. And then add some sort of animation where like the the little things sort of move around and the leaves rustle and so on and so forth.
3:24:08Oh, and this is going be the onboarding screen, which I think is going to look fantastic. The other pages here also look really clean. Oh, that's beautiful. Okay. Great. So I think what we can do is we can probably just feed in these directly and say, you know, I want you to build the onboarding just like this. So I'm a scroll down here and I'll say, these are the four onboarding screens. I want you to design the app onboarding screens to look exactly like this. I want you to standardize the design, the colors, and everything so that it
3:24:35follows, uh, this structure and I want you to screenshot loop over and over and over again until you get it down so that it's just about pixel perfect. There are minor changes in position of certain buttons e t c, so it doesn't need to be exactly pixel perfect with the placement of elements, but it should look the exact same outside of that. Okay. And then I think what I'm gonna do now that it's generated this, I'll say, this looks excellent.
3:24:57I want you to isolate all of the assets, all of the, let's say, image assets in these mock ups. So the trees, the backgrounds, etc and give them to me as images, so I can import them into the app.
3:25:14Okay. So now what it's gonna do is actually like extract the assets. So it should extract this picture for instance. It should extract these for instance. It should extract this image and so on and so forth. I can't actually do this, you know, I can't actually proceed until we get those images. So what I'm going do is I'm just going to create a new folder here and I'll call this images.
3:25:33You can find the images for each section in images. And then I'm just going to upload all the images there.
3:25:44And this is going be kind of hit or miss. I mean, you know, obviously, some of this design may not necessarily be reproducible procedurally. Right? Like, for instance, this little button background, you know, it's kind of like patchy, almost like a watercolor. Same thing with this. And I mean, are we gonna get an animation that looks like that? I'm not entirely sure. But
3:26:02I think we can probably get most of it, which is what's important. There are also minor kind of issues with this. For instance, this is like an AI generated artifact. These images of these trees aren't all the same, which is kind of funny because obviously we're generating them with AI, but when they're in our app, they'll all be the same. And then we need to make sure these number of trees actually matches. I like this. This is a lot clearer than whatever Claude just generated before.
3:26:27Anyway, we'll see how it goes. It's now actually finalizing the image call. Cool. And we actually have some of these already, which is nice. I think Claude is going to have to know to cut this image, you know, in order to get the right section of the trees and stuff. So that's gonna be a little tough, but I think we could still do this. I'm gonna save,
3:26:46We'll call this, I don't know, trees or something. I'm going to go back here and in images, I'm just going to drag in this. Oh, you know what? I don't think we can actually do that unfortunately. We have to open the folder in finder first and then we can go here
3:27:03and drag this into images. And then I don't know why that's not allowing me to actually feed this in images. There we go. Some of these images feature
3:27:16multiple mock ups, so you'll have to cut, crop, divide the image as needed. Before proceeding,
3:27:25perform these cut crops divisions so that you end up with a straightforward
3:27:35list of assets for the app. And I'm just gonna copy all these in sort of one by one. Oh, this looks great. Look at this. This is fantastic. So I guess this grows into this. Oh, not necessarily.
3:27:49It looks like we have different colors here, which I think is important too. So anyway, we'll download this as well. And then rather than you know, make this really complex, I think I'm just going to feed this image in, like all of these images in one at a time. I'll go back here.
3:28:05This is a lot of app images. Save that. When I save that, when I save that,
3:28:16we can also oh, I don't know about these buttons. I don't know about these buttons. I think I'm going to do everything but these buttons. So now I'll go back here and then what do we need? We need all three of these. So now I'm just going to drag them all in. And see for whatever reason, these didn't actually make it, so there you go. Okay. I'm gonna go back here and then I'll say, hard as you chop
3:28:40them up. Important we get this right. Once done with that, loop over infinitely until the design is pixel, is close to pixel perfect. Okay. This should now be everything that we need in order to actually design it, uh, to that style, which is quite nice. App is already starting to come together. Notice how the fonts and the colors and everything like that look a lot better. We just have a background, uh, of this image right now, which is kind of black and white. And I think that's just because of the the way that the mock ups were made. So obviously, we're gonna have to remove that background, but, this onboarding screen's already looking a lot better. Cool. So we have, uh, what looks to be pretty solid. The only issue I would say is
3:29:17this section here of like the nice blue sky looks a little odd. Right? Uh, there's just something here with the nice blue sky slowly fading in that I don't think looks as good as it could. There's also some artifacting, looks like from the background removal on this image that we should remove. So, yeah, we just need to find a way to basically, like, make the top a little cleaner, would say, and then it'll still look great.
3:29:37Um, but all all that's pretty good so far. I mean, I like the imagery and I like the way that it looks. Okay. Top corners of these images.
3:29:48Let's say, okay, bottom is now great, but the top corners of these images still look square, a bit square. Could we make the gradients come in a bit more, but only on the top? And I think the idea there is that will basically give us
3:30:06more circular, basically. That'll basically give us, like, a nice little, like, rounded circle and then we won't even really queue into the idea that it's a, you know, an an an image square that we're using. And, yeah, mean, like, that is gorgeous. Right? Like, that's pretty nice. I like this a lot. Alright. That's looking a lot better now. I really like this. Basically, what we did is we just applied, like, a little gradient of this blue,
3:30:27almost like a mask right around this, almost like an arch. I think we can probably make it just 10% stronger, so I will do that. But as we go through the app here, can see that, you know, aside from some image artifacting, we actually have something that looks pretty Granted, this is an app. Right? And we also have dynamic resizing and stuff like that, which is pretty cool. I like that.
3:30:47And I mean, we have we basically have, like, a good onboarding page now. So I'm just gonna proceed in this vein and replace all the assets with the AI image generated ones, and then circle back when I'm done. Alright. Perfect. This now looks exactly like how I wanted it to. Very organic, and you could see it's sort of like built into the app. Uh, grows as we go taller, and we don't have that weird sort of vertical line anymore, which is quite nice. So it's responsive. It's basically everything that we wanted. We can now move on. So you just
3:31:10fixed the onboarding. It now looks fantastic, but the rest of the app does not look anything like the onboarding. So we'll need to continue rolling out the
3:31:22generated images and assets through the rest of the app. Continue top to bottom, ensuring the design looks as similar as possible to the provided images. Take screenshots and loop as many times as you need to. You don't need to worry about the onboarding anymore since that's already done, but you do need to worry about the grow and the forest page. It should look
3:31:40identical to the images that I provided you inside of the images slash folder. Okay. App is looking a lot better now. We have the seed right over here. We can tap on the time to change it. Just kind of handy, so we've removed that other section, making it even more visually simple. Then we can just click this little button and then our seed can grow. Um, I wanna add just two additional pieces of functionality. The first is when I tap on the seed, I kinda want it to like jiggle around a little bit. Add functionality so that when you tap on the seed and really any tree on the grow page, there's a slight haptics
3:32:13and then it sort of jiggles around a bit, almost like it's organic or alive. And then change it so that you put the timer on top of the tree when you click on the start timer.
3:32:28What I mean by that is basically, I I want the seed to be sort of where the this is right now, and then this will just be kind of up top slowly counting down. I think that makes more sense just because having this down below doesn't make sense if this is supposed to be like the ground. And you can see this is already growing, right, which is quite nice.
3:32:45Looks really, really sexy that way. Alright. Cool. I mean, aside from that, if I go back to forest and come back, you see this is still operating, right, which is quite nice.
3:32:55We've manually well, not manually, but we've adjusted all of the trees that have grown so far and you can see there are different types of trees. There's like evergreens, there's I don't know. There's there's a lot. When you tap on one, can actually see the type of tree that was grown. K? And then you can also see the health of the tree, which is kind of neat. And anything that's withering, you can un wither just by tracking like time right now.
3:33:15So the oak is withering, for instance, for whatever reason, all all three oaks are withering, unfortunately. But I don't know. Your your oak here looks pretty healthy, which is nice. You have the ability to tap on this as well. And I mean, like, I think this is the the eighty twenty four set app. We've also changed the fonts and stuff too. Um, I don't like what happened here. It looks like
3:33:35okay. Yeah. So we do have that organic jiggle. But for whatever reason, the timer there stopped when I kinda went back here. So I'm wondering if that is a persistent issue. No. That looks fine. Um, we'll need to move that timer just a tiny bit higher. Move timer just a bit higher. Right now, it's inter it's, um, on top of the sprout. Cool. Yeah. I mean, I think we're just gonna move that a little bit higher and then I like how there's like kind of a seed here. Sorry, not a seed, a cloud.
3:34:02Higher, still going to be on top of the tree, the next animation change. So I think aside from that, maybe we just need more clarification around levels and then we're done. I think that might be it.
3:34:19This just isn't really understanding that it's still on top of the okay. That looks better. I'm just gonna sit here and well, I'm not gonna wait. I'm just gonna have it trigger all of the images so that I could see the tree and make sure that nothing kind of weird weird gets cut off. But yeah, after that, I think we're basically good to go. So more or less it. And that's what this looks like.
3:34:37As it grows, we have some weird cutoffs happening, we will need to fix that. But it does look gorgeous. It's looking like a lot of these are cut off weirdly. Could you double check the source assets and ensure that we're not including additional trees above or below the main tree, and we're also not cutting them off strangely? Yes. This is sort of our our dev mode, so you can see the pine and the trees and stuff like that grow.
3:34:56So I think when we fix this, this will look pretty gorgeous. So now this is, for instance, a large Sakura. And we can only do this by, holding it down and giving it a click. But, yeah, all these are beautiful. And the crystal tree, uh, I think is probably the coolest of all. So I'm gonna take my trusty pen and now mark the design stage off. It's now time for me to test this end to end. So I'm gonna do that using a combination of both Chrome and then, um, the iPhone mirroring app and then ultimately,
3:35:22Expo just on my device. So, I mean, I'm just gonna, uh, test this end to end now, and I'll do it off screen. But I have a bunch of functionality here, like, wanna be able to tap this. I also wanna be able to plant the seed. I want the timer to go up as I plant the seed. I have basically this little feature where I can now long press on it to change the sprout. So I'm just gonna run through all that. And then I'm also just gonna go through the entire forest top to bottom and ensure that this functionality actually lines up. Like for instance, two trees withering,
3:35:46you know, it says three here. So just gonna go do an a little end to end pass and then circle back. Alright. After a little bit of back and forth, maybe a little bit too much back and forth, we've now done all the testing as well. So all that means for us is the last thing that we need to do. Well, not last thing. I guess we're sort of halfway through the process. But the next thing we have to do is we have to add a database. Same thing that you guys have seen me do multiple times. I'm just gonna do this on Supabase. I'll head over to new project, and then I'm just gonna call this
3:36:14Pomodoro app. Gonna just have this select a password for me, generate one, and then I'll copy this and then enable automatic RLS as well. I'll head back over here to anti gravity and then I'll say, uh, super base time.
3:36:29I'm gonna feed it in a bunch of information after this project's created. Same sort of flow. I'm just gonna wait until all the stuff is set up and then I'm gonna copy the project URL publish publishable key direct connection string, etcetera. Okay. Then taking a look, they just built three different tables, sessions, trees, and then user straps stats.
3:36:47The database looks more or less like this. So we have a bunch of IDs for all the trees that get made. We have user stats as well, so like my level, my XP. We have some session information and so on and so forth. And then on the authentication end, we have confirm email here, which I'm just gonna turn off. And I'm just doing that because it's gonna be a lot easier for us.
3:37:09And now I'm, again, just gonna test this app end to end. So I think this is local host. Is it 8081? Probably. Okay. Cool. Cool. And now we have welcome back. Your forest is waiting for you. So this looks pretty cute. I I don't think the seed is good enough. I think what we're realistically gonna have to do is change it. But then again, that's what the testing is for, and then I can sign in. Oh, I haven't actually created an account yet, so let's just pretend.
3:37:32And, uh, okay. It's jumped us directly over to this page. We need the onboarding page, so I'm gonna move back and have it make that change. Alright. We had, uh, quite a few headaches on that end, unfortunately. I have yet to fully change all of the, um, app icons and sprites as well. I realized that some of the app icons I used for this just don't work. It's not even that they were cut off weirdly. It's just when they were generated.
3:37:53Sorry. Like, they are cut off weirdly. When they were generated, they were generated in this grid pattern, and then AI kinda chopped them up. So what I have to do is I basically have to go chat GPT and say, hey. Can you replace these and just generate them one at a time? Otherwise, it just takes forever for Claude to figure exactly where the bounding boxes are. And honestly, I think GPT image too, despite me having to spend maybe 10 to 20¢ to get this done, will probably just do a better job.
3:38:14And then I can also specify I want you to remove the background and so on and so forth and whatever. So a couple of additional things I'm gonna do there. But just because, uh, I'm about actually to head out to celebrate Mother's Day, I'm going to move forward to the security audit and then finally wrap it up with a final test before deploy. So how do I do my security audit? Do you guys remember there is a vibe coding
3:38:34security page right over here? So I can actually just go copy from all the way down up to this section, security audit prompt. Now I'm just gonna feed this into AI, same as usual. So first thing to do is clear. It's actually like clear and get all this all the way up to the very top. And then now when it has zero tokens remaining, I'm just gonna paste in that security audit. And let's just run through the entire thing end to end. And also if it's not clear,
3:39:00you know, this isn't a process that you're only gonna do once. Again, you're ideally gonna do this a couple times, maybe two, three times run through. And don't pay attention to that Shaw cancellation message up there. I just had to deal with an Internet issue quickly because I'm moving places. Boy, were there a lot of problems with that app. I think that this is probably one of the prettier ones that I've designed. And I really like the idea of having AI generate visuals without a background and then modifying those visuals aka,
3:39:25you know, in this case, having a sprite sort of grow over time. There are some additional things I could have done to optimize the functioning of this particular app. Like, for instance, I could have, um, I don't know, uh, you know, compress these images so that they load a little faster on mobile. These are things that obviously you can do. And if you wanna do them, then, you know, anytime you have like an app that is image heavy or anything like that, just add that as sort of a dedicated step before you finish. I should also note you can automate large portions of this whole process as well. Uh, I wanted to do it manually a few times to run it through. But for instance, you could just immediately pass this diagram into your Claude instance and then, uh, have it generate like a list of steps, claude.md, and just have it ask you questions about the app you wanna make. Then it could automatically kick off a series of changes that first build it, then find maybe the top three app designs out there, and then try and design the app like those apps. Maybe you could automate all of the Chrome testing. Can't really do that on your phone, unfortunately. Just kinda how it is. You would still have to manually do those steps. But then you could, I don't know, have it run through the process of creating a super base database and, you know, doing all that stuff automatically based off of best practices before finally doing that Chrome test again and then employing the security audit. And in fact, that's actually what I, uh, what I've done. I've set up a big clod.md
3:40:36file. Again, that is like your system prompt. It just contains a bunch of information about my framework and what I like doing. And, uh, when I actually create an app in my new workspace, the one that, uh, handles my my new app designs, it's quite straightforward. It's literally like, hey, just ask me all the questions. And then it just asks me a bunch of questions. I answer those questions granularly, and then it works together with me to to come up with a big plan for ultimately deploying them. So pretty cool stuff. Right? And I'm just running this another time, uh, to catch all the security issues that we had the first time, and then, you know, see if our solution has caused any additional security issues to crop up. Not a very big deal there. And it's looking like a few of these have actually flipped. Previously, they were fine. And now, I think get user versus get session is actually broken, so that's kind of annoying. I'm just gonna run through and have it implement the changes just like I did the other time. So great work. Run through and implement
3:41:26all changes to move the newly I'll just say, move any yellows or reds to greens. Pass. I'm gonna feed that in because I know now that it's done everything and it has. Now that we're strong, we can basically just do the implementation and then I'll run it through one more time. And, yeah, you could see a bunch of these things were right because that's what it did the last time, unfortunately.
3:41:51Just gonna wait for that to queue, and then I'll circle back when it's all ready to go. And boy, is that cool? I just went through a couple of sign up and onboarding flows, and I'm just doing it one final run through. But man, the haptic feedback when you hold down on the little seed and then it like jiggles, that's that's really sick. Also, despite the much higher resolution display of my phone versus my computer, the pictures look extremely clean. And, yeah, just happy to say that, I mean, this is just so much better than anything I I could have imagined. I planted a seed now for the last couple of minutes and I got, like, a cute little sprout going. The first thing in my my forest has been planted. This is one of those apps that I could actually very clearly see myself using. And what's funny is it's it's very simple. Um, I I find that best apps typically aren't the ones that, like, pack the most functionality or feature, but they just have, as mentioned, a core kind of loop that you just wanna return to over and over and over again. You know, in this case, I could either use the timer on my phone. I know to be wrong, I could. But why wouldn't I click this button and just see a cute little tree blossom? I have, uh, accountability.
3:42:50There's there's a form of engagement here. I get push notifications saying like, hey. Your tree is withering. Check-in on x, y, and z. Uh, so, you I know, think I could probably make this significantly more complex. I could add, like, crazy progress trackers and stuff like that, but I'm actually totally happy with my little Pomodoro habit tracker. And, uh, yeah.
3:43:06HOOKWith all that said, now that I've done this whole build end to end, a process, I think, that I've completed three times now, Why don't we actually push something to the App Store? And I think because I want this to be, uh, you know, wanna use like the more complex app, which is probably the calendar AI app. Sorry, the Cal Tracker or AI app. I'm gonna use that as like my push mechanism instead of this. But I want you to know that you can employ the exact same step that I'm about to show you or a series of steps on whatever app you want, whether it's this Pomodoro one, whether it's the habit tracker when you built initially, or whether it's something else that you built on your end. And it's fairly straightforward. I just gotta go run to Mother's Day, and I'll be back after giving you guys info about how to set all this stuff up.
3:43:46HOOKAlright. So I've actually compiled a full end to end guide in this Google Doc right here, which walks you through everything you need to know from the moment that your Expo app is finished, aka, you know, ready to go, all the way up until you have a submitted app on the App Store. And so this is gonna be the source doc that I go through as I actually do the app submission.
3:44:07HOOKNow, I want you guys to know right off the bat that there's no guarantee that you'll actually get your app onto the App Store. They have, you know, relatively rigorous lists of rules and procedures and you guys will see all the BS that I have to go through actually, you know, putting this app through. Done it a couple times now and it just never ceases to amaze me how you need to your screenshots just right, and you need to have your privacy policies all set up. But whatever. That's just part of the game. Right?
3:44:30Um, I want you guys to know we're gonna we're gonna go all the way up until the point that we submit the app. I'm gonna show you guys how to do the App Store specifically, and I'm gonna show you guys like an alternative that you can use if you wanna push it out to the Play Store as well. And you don't need to know a lot of the development stuff that I'm gonna be showing you guys. You can also and like what I recommend is to take this and feed it through Claude or another agent
3:44:50to have it actually automate a large portion of the procedure for you. So this guide has a bunch of prompts and stuff like that that you could use in order to, you know, test your app. Let's let me run you guys through kind of what the process actually looks like. So once you're done the Expo app, and I'm assuming that you've already done, you know, some form of end to end testing,
3:45:09what we need to do is we need to prepare for production. And so for this example, I'm gonna use the calorie tracker app that I developed sort of in the middle of this course, simply because it's a little bit more complicated. There are a few more steps. So when I say prepare for production, I guess what I really mean is we need to make sure that the app is, uh, ready to go. We have all the bells and whistles and all the steps sort of in the right places. And then after we prepare it for production, we're gonna build it, and then we're actually gonna push it to, you know, Apple.
3:45:35So how do we actually do the preparation for production? Well, basically, what we need to do is we need to generate a couple of things. Things. We need to generate a few files like app dot j s o n. Now this just includes a bunch of fields that Apple uses to, like, you know, call your app a specific thing. So think about, like, the name of your app, for instance. Think about, like, the identifier.
3:45:56I know don't if you guys have ever been onto the actual App Store and seen, but all apps have versions as well. Obviously, all apps have have icons of some kind. So we need to generate this file. We also need to generate this EAS JSON as well, which is specific for Expo. We need to do things like come up with the app icon, you know, the the splash screen. You know, when you push to Android, assuming you're also doing that, you need an adaptive icon, which is
3:46:19basically some sort of foreground image on a colored background. And I think that's because, you know, dark mode and light mode. And so the thing is this is gonna seem pretty complicated and pretty difficult, you're like, man, I don't have to do all this stuff. I just wanna like develop the app and push it out. But what's really cool is Cloud can actually do all this for you really easily.
3:46:35So all you really have to do is just take this and then go to whatever the Workspace is that you have. K? And then just pump in this app dot json and eas.json. So it's just gonna run through a quick configuration. Now, we should note that I've already actually prepped some of this stuff ahead of time,
3:46:53but it's just gonna run through and then, you know, go through either created if it hasn't already been created, and then just walk you through the various things that you need to do in order to get it all up and running. So you can see in my case, I I actually have already set the stuff up a pixel width of a 24 by a 24. My image is called public dot PNG. Here's a bunch more data.
3:47:12Here's also a bunch of stuff about the app. So track your calories and macros effortlessly with Cal Tracker. This is all stuff that Cloud will put together for you, basically. There are some permissions that you might have to, you know, adjust and kind of add runtime version policies or whatever. And then it'll just go through, it'll apply fixes. Some of this stuff is automatically generated for you as you develop the app, um, but you should do this final, like, step, basically, before you proceed to make sure everything is a 100% good.
3:47:38So anyway, it's gone through and it's actually fixed all this stuff, you know, with these permissions and stuff like that, identified that because our app needs, I guess, some audio while it's using the camera, we need to put all this stuff in. And afterwards, it's going to confirm your Apple ID, assuming that you've already set it up. And if not, we're gonna set it up in the in the next section. Once it's prepared, what we need to do is we need to actually build for production. And we need to understand is that apps sort of exist in a few stages. There's like your local test app, which is sort of what we were doing here with Expo,
3:48:07where it's running sort of like a live development version for us that we can adjust and tweak in real time. But then when apps actually make it onto, like, a a real device on the App Store, um, what happens is we we we take this big amorphous thing that we're constantly editing and changing, and we basically make it really concrete. We sort of crystallize the app by building it, and building it just like sets a bunch of these parameters
3:48:28automatically so that it runs a lot faster. And so what we need to do now that we've sort of prepared our app for production is we need to build it for production. And the way that you do this, just moving down a little bit, it'll give you a bunch of terminal commands and stuff like that. What I'll do is I'll go back over here and I'll say, okay, let's build it now. I'm just gonna paste this in.
3:48:48So it's gonna run through this step, see if EAS CLI is already installed, and then it'll also give you the ability to log in to EAS. You might be wondering what EAS is. That's just the expo system that we've been using up until now. K. So I'm just gonna open up a terminal, and let me just clear all this stuff. Um, now the thing is I'm already in this cal tracker directory.
3:49:08But if I'm not, say, me command with c d. And what this will do is it'll allow you to open any terminal window and then move to the correct directory. C d just for change directory. Uh, if you're not in the directory when you run the command, then there'll be a problem. So I'm just gonna assume that I'm not, and then it'll ask you to log in. So I'm actually already logged in as, you know, my whatever my account name is. If you're not logged in, um, you'll have to run through that login. Again, this is something that you will have already set up at this point in the program. Why? Because you will have already gone to, you know, EAS,
3:49:35um, and signed up for an expo account, like when we had to do the iPhone mirroring thing. Uh, if you're not already signed up, you can do so just by heading to expo.dev/ sign up. Once you're done, just tell it that you are logged in, and, uh, you can actually go through the process of building the production app. And so I I'm logged in now to my account,
3:49:52and you could see it's now running through, like, the the portal ID and the build and all this stuff. Because we're doing this for free, they have like a free tier queue, which takes a lot longer to build than if you were to like pay for it. Xposed service that basically just takes all of the work that we've done and then automates the process of, you know, submitting to the App Store. Believe it or not, submitting to the App Store used to be even more of a pain in the butt before Expo came around, not to mention the testing and and so on and so forth. While that's working, uh, make sure you have an Apple developer account set up. So just head over to developer.apple.com/account.
3:50:24Then also a Google Play, uh, console developer account. You do that by going to play.google.com/console/u/0/ sign up. Both of these are ever changing, so I don't really wanna, you know, make this video super concrete by walking you through the actual steps. But in general, you're gonna need a you're gonna need a couple of things. You're gonna need to, you know, make an Apple account unless you already have one. You're gonna need to create a profile here. Give it some information about who you are and and what you like and so on and so forth.
3:50:51Give them their email address, verify your email address, and so on and so forth, uh, and then do the same thing here. One little tip I'll give you guys for the Google Play, uh, console developer account is when you select your organization or type, um, I'd actually make sure that one, you have a business email here, not just like an an average@gmail.com.
3:51:11You can do that just by setting up like a Google, uh, workspace account really simply. So I can do that by just moving over to Nick at left click dot a I over here, and I can click on my little developer account. When you do this and you go through the whole sign up, it's just a lot faster because you will have already done a lot of the verification on Google's end, like when you set up the Google Workspace email.
3:51:30Uh, so, I mean, that, you know, costs or $7 a month to have your little Google Workspace email running. But I'm assuming you guys wanna do this as a business. You should probably have a business email. You know, Nick@LeftClick.AI. That's the name of my agency, for instance. Once you're done with that, you'll also have to verify you have access to an Android mobile device. They won't actually allow you to do any of this stuff unless you have an Android, which I think kinda makes sense. Right? I mean, they're not trying to make money off of you by being, like, go buy an Android, but you do have to you do have to proceed through the process of, like, testing it on your Android phone. They wanna make sure that whatever app you build is good.
3:51:58Okay. So anyway, after you're done with all this stuff, the build, uh, will go through. We'll move on to the next section. So now we built for production. I'm assuming you guys already have an Apple developer account set up and an App Store Connect sign up. Um, now we need to deal with privacy and compliance and then submit the build. So privacy and compliance is gonna vary depending on if you're going through the Apple developer, um, submission or the App Store submission. I want you guys to know that they're very similar. The shapes of them are a little different. Like, um, you have to do I don't know. Like, they they put all the form fields and stuff like that differently if it's your Apple developer account
3:52:28or your App Store. But, like, it's it's all the same thing. You gotta come up with screenshots. You know, you gotta come up with your icons. You gotta, you know, come up with a big description of your app. You basically have to optimize your little landing page for the app, uh, and make sure your app works before you submit it. So what I'll do here, to save you guys a bunch of time, is I'll just show you a high level overview of, uh, the Cal Tracker app submission for Apple. And then it's a very similar sort of one to one move over if you wanna do stuff for the for the App Store. Now the privacy and compliance is, um, probably like the the most laborious step here. Because in order to set up the privacy and compliance, uh, these platforms actually force you to have a web accessible landing page set up with, a privacy page and then, like, a compliance kind of, like, policy. It's a pain in the ass to do.
3:53:10Luckily, I actually already have one of these for CalTracker slash privacy, and this is what mine looks like. So this is my website here, LeftClick. Right? It's my agency. It's where we build things for companies using, um, AI technology like this. And the way that that this CalTracker privacy policy works is I literally just fed it in the entire page
3:53:28of, like, the Apple app submission, um, guidelines. And I said, hey. I'm coming up with an app called CalTracker. Can you create a privacy policy and then host it on, you know, my my website? And so that's what this whole page is right over here. You could see there's like a way to contact me and stuff like that.
3:53:44There are a couple of other pages as well. There's like a support page here, um, which you'll also have to set up. And, you know, the reason why I do everything using it is just it's so fast to, create a a web page like this. I literally just said, hey. Make me a web page hosted on my website. You're good to go. Right? Like, that was like boom. Was two seconds. I didn't even have to come up with any of the text. Um, I just had to feed it, like, the the requirement of what was asked. You know, it did things like, how accurate are the AI nutrition estimates? Well, they're approximate. They should be used as a guide, not the the the end all be all. How do I set up my Anthropic API key? Hey. Here's how to do it. Right? And it, like, sets up the guide and everything. And so I guess what I'm saying is, like, in order to proceed with the step, you are gonna have to have some web accessible resource that ideally is at the same domain as your email. Doesn't necessarily have to be, but I mean, I I ideally, you would have all that stuff set up. In terms of the actual app page, when you actually go to do the submission, let me show you guys what that looks like. When you're done, what you can do is go to this link. That'll open up your Expo account. Um, I don't think I actually am signed in right now, which is why I'm getting this page. So let me just sign in. Then when you head over to build, you can actually see it right here. So iOS app store build. K. Give that button a quick click.
3:54:47And here is basically the whole walkthrough of everything. So you I mean, like, this is like the the the the finished file, basically, which is referred to as a dot IPA. Um, so with this dot IPA file here, you can actually go click submit to an app store, and then you could run through the submission, um, steps. I'm gonna copy that. K. Assuming that you have everything set up, all your privacy policies and and whatnot. So what you do is you then type EAS submit platform iOS.
3:55:12And if you're not already logged in, right, you are gonna have to do that login procedure. Um, and if you receive an error saying, like, I don't know, your IDs aren't matched up or whatever, just feed the error into Claude Claude can walk you through that process. But after you're done, you just say, what would you like to submit? Well, I wanna select a build from EAS, which is the service that I just used. So click that. And you'll see there are a couple of IDs here. Okay. These are all just different apps that I've sort of done. This is twenty three hours ago yesterday. This is a slightly different ID. So now I can actually press ID.
3:55:39Now I need to log in to my Apple developer account, which I already created. So I'll do that now. Because I already have, like, a key on my computer, it just automated the process of logging in. And now you can actually see the App Store connects a API key and everything. This is basically just hooked up to my App Store. And, uh, at the bottom, I have this big link.
3:55:56So what I can do is I can open the link. That'll take me back to this page, which is now called an iOS App Store submission. Again, this is being managed by Expo. On the left hand side here, you could see we have bunch of different steps. There's builds, there's submissions, there's a couple of other things. You can actually do over the air updates through Expo. It's pretty cool. Um, but once the actual app store, uh, connect is submitted,
3:56:15CTAwhich will take somewhere between three to maybe five minutes or so, there'll be a little link down here that will click. It'll actually take us to the submission page. The submission page is gonna look something like this. We see up here it says Cal Tracker by Nick. The reason why I have this little logo is just just what Claude created for me. And I've already done this specific submission just because I wanted to save us some time and show you guys how straightforward it is. But basically, what you're gonna have to do is you're gonna have to drag a bunch of screenshots for the 6.5 inch display iPhone right over here. So that's what I did with my app. And I didn't come up with any of this stuff, I just had Claude do it all for me. You'll also need to do the same thing for an iPad. And, uh, I think what's interesting is the iPad, uh, like, automatically generates a bunch of other variants for you too. But iPhone and iPad, these are kind of annoying to do, of course, but again, Claude does it all automatically. Now it'll actually open up your your browser or take screenshots.
3:57:01CTAThe promotional text over here, I just copy and paste it from Claude. Description, just copy and paste it from Claude. Keywords. Here's the support URL. Okay? So you do need a support URL. Remember what I talked about earlier? That's what I pasted in there. If I copy and paste this in, you'll see them on that page. Need a marketing URL, which is just like your homepage for whatever the website is. Not a big deal. Version number should be one point o. Set your copyright to whatever it is. I mean, in my case, it's my company. As you proceed and go down, you'll need to select a build. So I selected just the build that I just submitted to expo.
3:57:32CTASo, uh, we need to tie this to a particular build and, you know, we've submitted the build to the App Store, so it's all good. Right over here, you need a a required sign in. So now this is interesting. It's a login that an actual human reviewer on the App Store end will use to sign in to your app and test the functionality. So right over here, we have testetoe@Gmail.com,
3:57:50CTAt three s t exclamation point four one four. That's like the username and the password. And then, you know, I'm saying you can basically just sign up or whatever to do anything you want. And then I always recommend going automatically release this version. Okay. Now, unfortunately, this is just one of the many pages here. You actually have a lot to go through. You have the, uh, app information, which is where you choose the name. So I just said Cal Tracker by Nick just because, you know, this is a demo and I want you guys to see it. After you're done with that, you need to fill out the age ratings, all the content rights, the category, and everything like that.
3:58:21CTAUm, once you're done with that, like, I I just proceed top to bottom. You know, you have app reviews. This one's currently waiting for review with somebody yesterday, and then you can also see the history. Continue proceeding. We have app privacy. So this is where you add your privacy policy. You can also add a user privacy choices URL. You don't need to do that. It's not required. It's optional. If something's optional, it'll tell you, and I recommend just skipping.
3:58:40CTAUh, product page preview data types. And then you literally just proceed top to bottom, filling out everything that it says that you have to do. Right? It's annoying for sure. Uh, if something is optional, it'll specifically tell you. In my case, uh, a lot of the growth and marketing stuff are optional. Uh, for pricing, you do have to select the schedule. That's what I did here. I just made it free. And then there are few other things you have to do as well. Like, um, if there are any in apps purchases, need to, like, be really clear about what they are. And you also have to make sure that your app is not like gambling.
3:59:06CTAOkay. Anyway, once all that stuff is done, what you do is in the top right hand corner, you'll have a a little button that says submit for review, and then you can just click that button. And it'll actually be sent to Apple, uh, to go through that whole process on their end. Okay. So I've done that now with the Cal Tracker. And as mentioned, there's no way I can guarantee that this app actually makes it onto the App Store. Obviously, all we can do is we could significantly improve the chances by making sure that we have all the pages and stuff like that. If the review turns out that, you know, our app isn't good, typically, the reviewers will provide at least some sort of guidance or or steps that you need to take in order to make sure that your app can make it. And it's just up to you how deep, uh, into it you wanna go.
3:59:40CTAWhat's cool, obviously, is that I have this whole guide here, which walks you through an end to end. So if this video ends up insufficient for whatever reason, uh, you can also just compare this. Uh, and then, you know, because sort of like diagrammatically, this is more or less a you just do the same process over and over and over again every single time you want to go through, you know, an actual submission. And then this post launch step down here, this is honestly mostly just like your growth and your marketing.
4:00:03CTAAnd, um, you know, earlier on the App Store submission page, down here where it says, uh, product page optimization, custom product pages, promo codes, game center, all this stuff. This is sort of like how you optimize the app once it's launched, once you've had a couple of users. I should also note, it's kind of weird to just like build the app and then launch it and submit it to the App Store immediately. Typically, you're gonna wanna like do some testing. So, um, there's a feature here on the App Store Connect called Test Flight, which allows you before you roll out the app to push this to people, um, you know, within your network to give them a link that allows them to download your app sort of secretly. Uh, typically, you know, you actually do wanna push this to a few real users to go through, test your app for you, tell you if anything isn't working or or is kinda janky. But, obviously, I can't really do that here. I can't go through a big, like, test feature period for, like, two weeks because I wanna publish this video and give you guys that value. So test flight is a is a very viable alternative.
4:00:53CTAAnd then, yeah, make sure that after your test flight kind of distribution, you can then do and distribution, you can then do analytics and you can see how things are going and optimize your app. And that's that. Thank you guys very much for joining and completing this journey of mobile app development in Cloud Code. Had a lot of fun putting it together for you, and I absolutely love doing end to end courses like this. So, yeah, certainly hoping you learned something. If you guys like these sorts of courses, I also have a seminal four hour Cloud Code course that walks you guys through all the icons and little buttons and widgets, context management,
4:01:25CTAreally in-depth prompt engineering and so on and so forth. So now that you've sort of seen a top down version of how to build things with Cloud Code, you know, sort of playing around with and learning by doing. If you want a much more bottom up and comprehensive curriculum, definitely check that out. That'll be down below in the description. Also a bunch of advanced cloud code courses that teach you things like, you know, how to optimize skills for knowledge work,
4:01:46CTAhow to get up and running with like advanced sub agent or multi agent orchestration, and so on and so forth. Now, you guys have got to the point where you know how to build stuff, the natural next question is, what do I do with all of my skills? And a route that many people take is monetizing those skills through providing it as a service. And if you guys wanna learn how to do that, I also run a community called Maker School. It is a ninety day money back guarantee, where if you don't get your first client by the end of a ninety day period, I will actually give you all of your money back. Has probably the highest completion rates of any online community out there. We've won the school games many times in a row. I was actually the number one community on school for, gosh, I don't know, probably three or four months. I went down to Los Angeles, met with Alex Ramosy and Sam Evans,
4:02:28CTAand so on and so forth. And actually, like, taught a bunch of people how to build great high engagement, high quality communities where people actually achieve their stated outcomes. So, yeah, definitely check that out. Over 2,000 other people are currently learning how to sell these sorts of technologies through a variety of means. We do lead gen through, like, cold email. I show you guys how to construct, you know, DM sequences to send to people. I show you guys how to build your own social media, uh, brands, and and and and also build, like, lead generation funnels that don't rely on referrals, like I think a lot of people are unfortunately forced to.
4:02:59CTAAnyway, I'll stop tooting my own horn, but, uh, you know, you make it to the end of a four hour course. Probably gonna be at least a couple minutes of advertising. Hopefully, you guys appreciate it as mentioned. And if you guys have any ideas for future videos, just leave them down below. I'm more than happy to read the comments and then get inspired. I'll see all y'all in the next one. Take care. Oh, and please subscribe to the channel. Hate asking for people, but, uh, that significantly helps my reach. Take care every
§ · For Joe
Steal the stack and the framework.
Joe's mobile playbook
Nick just handed you a complete, repeatable system for shipping mobile apps with tools Joe already uses — the only new piece is Expo.
- The five-stage framework (Core Function, Loop, Accessory, Surface Area, Retention) is the new app design checklist. Use it for every JoeFlow feature, every MCN+ tool.
- Expo + Supabase + Claude API is the exact same stack Joe runs on the web. Mobile is one extra layer, not a new world.
- The AI coaching architecture (edge function to Claude API to DB to push) is a direct blueprint for any AI-powered scheduled feature.
- The App Store submission guide linked in the description covers the exact steps most tutorials skip. Save it.
- Nick's CTA framing (90-day guarantee, first client or refund) is a masterclass in risk reversal for a community offer. Study it for MCN+.
- Black title cards between sections are a simple production pattern for long-form tutorials that aids scrubbing and retention.
§ · For You
You can ship a real mobile app this week.
If you have Claude Code and a weekend
You do not need to know how to code, hire a developer, or pay for a no-code tool — you need Claude Code, Expo Go on your phone, and a free Supabase account.
- Start with the five-stage framework before you write a single prompt: define the one thing your app does, the 30-second reward loop, and the reason someone comes back tomorrow.
- Use Expo Go to test on your real phone in minutes — scan a QR code, the app runs live.
- Supabase free tier handles auth, database, and edge functions for most early-stage apps at no cost.
- When Claude tries to give you instructions to follow, say do it for me — that handles 80-90% of manual steps.
- The App Store costs $99/year for an Apple Developer account. Everything else in the submission process can be generated by Claude.
