Learn to build and publish a real Instagramst style mobile app from scratch using codecs and GPT6 Astra. Brock will guide you through the complete development life cycle, covering everything from generating UI designs and setting up a backend to App Store deployment. You'll master not just the code, but the exact AI prompting workflows needed to turn an idea into a finished product. Welcome to the complete Codex tutorial on how to build a real mobile application using AI. In this course, I'm going to show you the exact workflow that I used to go from an idea all the way to a working mobile application. And just for some context, recently I have used this exact same workflow to build my own mobile application and publish it to the app store. So everything I'm going to show you in this video actually works. Just before we jump into coding, let me show you the project that we're going to build in this tutorial. So this is a social media application just like Instagram. If you want to use it, first you need to be authenticated. And here in our case, we have two different options. I'll go ahead and log in with my Google account. So once you're authenticated, you'll be redirected to the home screen. And here we have four different tabs which are home, messages, explore, and profile. And notice how we have the iOS liquid glass effect. And I'm going to show you how to build it without writing too much code. And now in the home screen, you can see the posts of the user that you already follow. And here you can also post stories. So let's go ahead and select something from our library. If you wanted to, you can also get it from your camera. But here I'll just select something from the library. So I'll go ahead and maybe post this image. Let's publish. This is going to upload it in the background. And once it is done, we will be able to view it. So here, here we go. So the stories works just like in Instagram. If you want to pause it, you can tap and hold it. And if you want to go to the next one, you would just press. And you can delete your stories if you are the owner. Now you can also posts, right? So you can create posts. Let's go ahead and publish something. I'll select this image and we can add a caption. Let's just say this weekend trip and let's post it. So here we go. It's posted and we can see it immediately in the home screen. You can like it and you can even add comments. So, let's go ahead and just say something like, I don't know, something test and post it. Now, it's going to be right here. You can like the comments. You can sort them. Here we have couple of different options and you can even bookmark the posts. So, that's it for the home screen. We also have realtime messages. So, here you can tell we have couple of different past chats, but they are all fake data that I created for the sake of this demo. Here I'm going to put the actual footage from the tutorial where I actually test this out from my phone. So I literally sent a message in real time and everything works in both of these accounts. And other than messages, we have the explore screen where you can see random posts from other people with a really good UI design. You can like them and if you press them, that's going to take you to the actual post. And from here you'll be able to see the other accounts and follow them or even unfollow them if you already follow. Here you can search for people, posts or even topics. Then eventually we have the profile screen where you can see your posts, even videos, bookmarks, and the tag posts. So you can also edit your profile here. Let's just say for the bio I'll put something like I don't know let's put YouTuber and then I'll save. As soon as I save here you can tell the profile has been updated. On top of this you can also change the profile image and we have the settings screen. Now here we have bunch of different buttons and links but the most important ones are the privacy policy and terms of services. Here you can tell we actually link it with a real real URL and we link it right here. Now this is something that you must implement. If you don't implement it, Apple will reject your application and I'm going to teach you how to do it later in the course. Then we also have the delete account option. Again, this is one of those things that if you don't implement your application will get rejected. And we even have a feedback button where users can literally send us some feedback like here they can put their name. I already filled this in but you know you can just put John your email and then if you want to have a feature request or I don't know any kind of bugs here you can tell you know please fix the edit profile feature it doesn't work and then you can send the feedback and I'm going to show you how you can collect those feedbacks later in the video. Now on top of the mobile application we're going to build a landing page with a really nice looking UI design. Here you can tell we have some demo images and I'm going to show you how to create them and use them for your future projects. And at the very bottom we have the privacy policy and terms of services links. Again, these are the things that you don't really want to skip. So that's the entire project that we're going to build in this video. Now, this is not one of those random vibe coding tutorials where we just open Codex and say, "Build me an application and hope everything somehow works." Instead, I'm going to show you the entire process step by step. We are going to start with an idea. Then we will plan the application properly, figure out all the features that we would need, generate a complete UI design, and then use Quadex to actually implement everything. By the end of this tutorial, you should have a clear understanding of all the tools that you would need to build a modern application using AI. You will also know what to do when you get stuck. Because one of the biggest problems when you're coding with AI is not necessarily the coding itself. It is knowing what to ask. So throughout this course, I'll show you how I deal with it, how I give Codex more context, and how I get it actually help me solve the problem. I will also share the prompts that I personally use. This includes the prompts that I use for planning an application, generating the UI design, implementing the screens, and even creating things like privacy policy and terms of services. And these things are actually important if you want to publish your app. Depending on what your application does and what kind of user data that you're collecting, Apple can require things like a privacy policy, terms of service, delete account feature, and other information. If you miss something that is required for your application, you can easily get rejected during the app store review. These are usually the things you would learn the hard way after building your first application, but I'll try to cover all of them in this tutorial so you know what to look out for before you submit your application. It is also important to mention that when people submit their application to the app store for the first couple of times they get rejected which is normal but in my case I never got rejected by Apple. My app literally got accepted in the first submission because this workflow covers everything. So you don't really miss any important detail. And just one more thing that all the tools that we're going to use in this course are completely free to get started with. So you don't need a credit card to follow along. and the complete source code for the application will also be available for free. I will leave the link in the description. My goal with this course is helping you to understand the entire workflow so that after finishing this video, you can take your own idea and actually know how to turn it into a real mobile application using Codex. So, we're going to go from idea to planning to UI design and finally getting the app ready to publish. Now with all that being said, let's not waste any time and get started with the course. Now just before we get started, I quickly want to mention that we have a school community and within the school community I have basically documented the entire journey of building my own application and publishing it to app store. Here you can tell everything took exactly 14 days because the day zero is kind of like crash course. So everything took around 14 days to submit it to the app store and then we start with marketing and new classes will be coming every single day. So this is a community for those of you that are interested to see the entire process like having payments, you know, we have monthly, yearly plans, maybe even some weekly plans. Then how do you get through the entire submission process or something like how to implement push notifications? And this is not just a course, but it's a live community. Here you can tell everyone is sharing their own process like motivating each other, so on and so forth. And actually, one of our students has already published their app on the app store. And just for the record, this is his app and he built it with me within our community in exactly 14 days. And just to give you some insights, like when you press one of these classes, we have specific videos for that day. And you can always come back and double check these lessons if you're interested. So, if you want to join, I'm going to leave the link in description. And hopefully I'll see you inside. All right. So, as usual, we are going to start from absolute scratch. First off, in my case, I'm using VS Code as my code editor, but you can really use anything that you want. That could be cursor, I don't know, it could be windsurf, really anything that you wish, but I would recommend you to use VS code so that we have the exact same environment. Now, for this, you can visit codevvisisualstudio.com and then press this button. Now, in my case, I'm using Mac, but if you're on Windows, you're going to see a related button, and you can just install it for Windows as well. And once again, um, in this tutorial, I'm using Mac, but if you're using Windows, everything will be almost exactly the same, so you can follow along without any issues. The other thing that you must have is NodeJS. If you don't have it already, just visit node.js.org, or press the download button. Leave everything as it is. Like by default, it's going to select your environment, you know, your operating system, and then install it. Okay. So, I'll just assume that you have both of them. Then head over to your desktop, create an empty folder. In my case, I call this as Codex Gram, which is like Instagram, but I put Codex. You can call this anything that you wish. And then just open it up in VS Code. So basically just drag and drop it right here. It's going to open this up. Okay. So once you have it now we can start building a mobile application. Now what I'll be doing is first creating a boiler plate. And for this we'll be using Expo. So if you don't know already, let's go ahead and visit expo.dev. This is literally the best way to start a mobile application as of 2026. Literally, they have everything that you would need from building the app to publishing it to App Store and Play Store. This is what I used to build and publish my app to App Store, you know, just to let you know. And this is completely free to get started with. But if you're serious about publishing your app to the App Store, then probably you would like to go with at least $20 per month plan. Uh but yeah, for now, you don't really need to pay anything at all. Now with this um we'll go ahead and visit expo.dev/doccks which is the documentation and we need to copy this command. Now technically we can just ask cloud or codex to run this for us but here I'd like to run it manually to show you what we're going to get and like it's going to be a bit easier to do it by ourselves. So paste this in to your terminal and put dot at the end which means create an expo application under the current folder. Right? This is what that means. So it's going to create everything right here. First we're going to get a question. At the time that I'm recording this video it is seck 57. But if you're watching it in the future this will be incremented. That's not a problem at all. Just go ahead and press enter. And this will get couple of different files and folders which is basically a simple mobile application. And we can run it in a simulator just in a second once this is completed. Now I am on Mac. My simulator is going to be an iOS simulator. But if you're on Windows, you can install an Android um simulator. Right. So here I'll go ahead and run my simulator. And by the way, with the latest features, like as of now that I'm recording the video with Expo, you can be on Windows but still build it for iOS. Like you can literally run an iOS simulator on Windows. Just check their documentation. Um, you'll be able to see it. It is pretty new, so I'm not going to get into it, but just know that something like that existed. Okay, so here I have my simulator. I have some previous projects that I created in the past, but we are going to go ahead and start from scratch. So here it says you can start this app by running these commands for Android, iOS, and even for web. Here I'll go ahead and just say MPX expo or MPXO start. This will give us a QR code as well as a open terminal where if you press I, it is going to open this app in your simulator. So let me actually put them side by side. Okay. So it looks like something has failed. I'll press I once again. It is trying to open this. I don't know why I'm getting an error. Usually it should open it immediately. But now that's not a problem at all. I'll just go ahead and you know ask cloud or codex to explain what is happening here. And speaking of cloud and codex, if you would like to use cloud, you need to install this extension within the VS code. So cloud code for VS code and make sure you get the verified one. And then if you would like to use Codex, this is what I'll be doing in this tutorial even though I have subscription for both of them. Codex has a recent model called GPD6 Astra and I'd like to use it in this tutorial. So go ahead and get Codex if you have subscription or cloud or really anything that you wanted to have. And by the way, one thing that I want to mention is that the goal of this tutorial is not getting the exact same end result. So the goal here is understanding the workflow to build mobile apps by yourself. So, it's fine if at the end of this video you have a different app than what I have. I mean, the functionalities will probably be the same, but UI design could be different. Code could be a bit different, and that's because AI doesn't really give the exact same end result every single time. Okay? So, that's one thing to keep in mind. It's completely fine if you don't have the exact same end result that I have right here. And other than this, like I see a lot of people get kind of like depressed because of AI where it can almost build anything now. But I've been always like I've always been on this side where I'm just trying to find the opportunity where you know it helps me to build an app pretty quickly so that I can focus on marketing and you know focus on different things. Now since AI can build anything which is not really true at the moment um even though I think it's going to be at some point but at the moment it's not really true. It cannot build anything. It can build something to start with but as the projects get larger and larger it kind of sucks. So I think it's still important to know the fundamentals of programming but if you wanted to build a simple project I don't know an MVP I think AI can help. And with this tutorial, hopefully you will learn how to build an MVP. Okay, so with that said, I would definitely recommend you to get a $20 a month plan in one of these, either Cloud, Codex, or Cursor. I think for now, my favorite could be Codex. Even though I've been using Cloud for a very long time with the latest model they have, which is GPT6, I think you can go with Codex just to test this out. And I think Codex is cheaper than cloud or cursor. Okay, so with that said, now let's jump back into VS Code. Go ahead and get this extension. And I think I need to restart the extension. And you'll just press twice to this empty area. From here, you can get Cloud or Codeex. Let's say you're using Cloud. This is the interface that you will have. Now we can talk with cloud and you can you know update the model. Let me actually maximize this like you can update the mode and initially we'll use the plan mode. I'm going to get into that and you can update the model you know you can add the effort etc. And we have similar thing for codex. This is what I'll be using. So just go ahead and press add. Now here you can again change the model. The latest one at the time that I'm recording this video is this one. And you can update the effort as well. So here I'll just give the full axis so that I don't really get um so one thing I want to mention is that here the extra high and even like ultra you go is better but it's going to be taking much more time than it should. So here, usually I would go with medium or high. If I'm building something a feature that is not really that important, but if I'm trying to build something that should work exactly as I want, then I would probably go with extra high or even ultra. But just know that it will take much more time if you go with one of these. So in this tutorial, I think to start with, I'll go with medium. And here for the permissions, I'll just give the full access so that it doesn't really ask me questions all the time. So here I basically say, hey Codex, whatever you would like to do, just do it. Don't ask me. U just be careful with it. But usually you'll just give the full access anyways. Okay. Now to start with, first thing I'll be doing is opening up my terminal with Ctrl J. And I think now application is running. We had an error, but it just fixed by itself. Here you can tell if you press R, it's going to reload the app. And we have this default project coming from Expo. Now, of course, we're going to delete everything. And let's actually do it. You would like to open up your terminal. So, kill this with Ctrl C. Clear this up. And there's a command that we can run. So, it's going to be mpm run reset- project. This is going to basically take all these folders and files that we don't really need and it's going to delete them. So now we have some components that we don't really need, some constants, hooks, so on and so forth. So just go ahead and run this. Then press enter once again. Here you can tell everything has been deleted and it has put it under an example folder which I don't really need. So I'm going to delete that one as well. Now let's run this app with MPX Expo. This is what we had initially. Right? Now, if you press R, it's going to reload it. And notice how we have much more simpler application. Right? This is literally just one screen with a simple text. Okay. Now, with this in mind, let's go ahead and plan a project. And in this tutorial, I'd like to use sorry, I'd like to build a social media application kind of like Instagram, but of course much more simpler than that. All right, so I have accidentally paused the video, but I was just saying that we would like to build an Instagram clone that is much more simpler, right? So we'll have maybe things like posting photos, commenting, having a profile screen, things like that. Um, and here's the workflow that we're going to be using. This is what I used to build my own mobile application as well. And I'll try to break it down as we go through this course. So, the very first thing that you need to do is planning your project. This is a step that a lot of beginners just skip. They immediately jump into coding because they're like really excited. But it almost always fails because if you don't plan everything then at some point AI will start guessing even like at the start. So what you'd like to do is kind of like giving the AI the context what kind of project that you would like to have you know like define your idea goals features pages user flow and text tag so that it doesn't really guess all these tools and features and for this I have a really really good prompt that is working every single time so I'm going to leave this in the description just go ahead and copy this entire thing and you can pause the video and read it. Basically, I'll try to simplify it. We ask AI to interview us about every single thing about this project so that it doesn't really guess anything and we are on the same page. Okay. So, once again, you can read this entire thing if you're interested, but I'm just going to copy this and go into cloud, sorry, into VS Code and into Codex. Here, you would like to select the mode. Let me find it. It should be plan mode. And to select plan mode, you need to press this plus. And then go ahead press the plan mode. Now paste the prompt first. And then here we say we are about to describe you the project. And here now I'll just go ahead and explain everything. Once I have it, I'll just be right back. So here I have paused the video and try to explain it to Codex. And here is my entire prompt. So here I said I want to build a simple Instagram style social media application using clerk for authentication and convex for the backend and database. I'm going to get into both of these technologies but basically this is the text tag to get started with. And then here I said users should be able to sign up and log in with Google or Apple. They should be able to create images or videos as posts, follow and unfollow, you know, like and comment. You can read the rest. And there's also sending direct messages, right? And they can also view and edit their profile. And here I say the app should have four main tabs which are going to be home, messages, explore, and profile. Now talking about tabs, let's go ahead and take a look at the native tabs in Expo. I'll just say native tabs and visit it in the expo documentation. Just scroll to the bottom. So these are the tabs. This is what I mean by tabs. And native tabs are giving this iOS liquid glass effect. Okay? So you don't really need to restyle it or generate it from scratch. There is a component called native tabs and it's going to give you all these features out of the box. If you're interested, you can take a look at the entire documentation. But this is something that we would like to use in here. Let's actually also say something like we will use native tabs and also for styling let's say we want to use something like native wind. So native wind is basically tailwind CSS but for react native okay for mobile application. Okay so you got the point. First off, you're going to get the plan prompt from right here, right? And then you would like to describe your project. Um, this is exactly what I have done. Of course, this should be a lot more detailed if you can, but for this demo purposes, I think that's fine. And here we'll go ahead and run this. This will ask a couple of different questions in like couple of different batches. First, we're going to get maybe like four questions. We'll answer all of them and then we're going to get another batch of four and then another one until AI has every single thing the entire context once we have it plan will be ready then we can actually start building the project and instead of building immediately what I'd like to do is generating the UI design depending on that plan that we generated and I'm going to get into that again I'll give you some prompts to generate the UI design. Okay, so I am back in VS Code. Here we got the very first batch of questions. We have three different questions. Here it says, who is V14 and what counts as a successful first release. Now, most of the time you would like to go with the recommended answer, but there will be some places where you'd like to actually choose a different like different answers than recommended and even sometimes add your own description. But in this case, I'll just say this should be just a working demo and I'll go with the recommended option. Then here it says like should we build it for both iOS and Android? Here I only want to have it for iOS first. So, I'm going to say, you know, like just go ahead and select this option. If you wanted to, you can select this one as well, but this is the one that I'll have. And then let's say public to members. Yes, everyone should be able to use it as long as they are signed in. Okay, so now AI will keep these answers in memory and then it's going to ask us another batch of questions. So, I think I'll just go through and answer every single one of them. Once it is done, I'll just be right back. And instead of answering them off camera here, I'll just do it right here so that you can see the type of questions that I'm getting. For image creations, let's just say single upload only so that we can keep it simple. So, here it says what users should see once they sign up. will say they have to choose a username and then here I'll just say home header button what comment and deletion behavior do you want for the demo let's just have flat comments and own deletion you can go a lot more complex but for the initial version that's not really what you would like to do so here again you can read the question this will be my answer and then it says what media limits are accept acceptable for this demo. Let's just say images up to 10 megabytes and video up to 30 seconds and 50 mgabytes. We don't really want to allow too large images and videos at the start. Um here it says can v1 exclude push notifications. Yeah, absolutely. We don't really want to have payments push notifications for initial version. I'll just say yes. trusted demo. We don't really want to build something really complex from the start. And this is what I have done with my own mobile app as well. Like instead of building every single feature from the start, I basically um started with the simple version which is V1 right. Just an MVP. So I said at least users should be able to take a photo and calculate their calories with AI. Once I had it, then I added bunch of more features, right? You don't really want to build everything from the start. From my experience, this has been working really nice. And this is what I would recommend. I would say um here we'll just say we'd like to build our own custom native screen instead of using the cleric UI because I'd like to show you how to generate something from the UI design that we're going to get from AI. Okay. So I'll go with this option and we would like to use convex throughout the project. Let's say online first and there should be retries as well. So here I have another question about the theme. Instead of answering any of these like I'll just put my own kind of like description or I'll just try to explain something like for now only light mode and I'm going to say for colors I'll provide a design reference later at some point because we don't really want it to use some you know like a color palette like blue it says but I don't really want to have it later at some point. I'll provide a pre-made design. So, I'll just say use that one. So, let's say it should be tap to play I think. Yeah, it is recommended. I'll just go with this one. Now, there is something called development build. And let me try to explain pretty quickly before I answer this. So, here you can tell we are running our application, right? But it is within the expo go. So this is the tool that expo provides you but this is for testing purposes right. This is for learning purposes. When you're building an actual application then you would like to create a development build because within this you cannot really have every single feature or some native modules doesn't really run within the expo. Okay. So once again in simple terms this is for testing purposes for learning demos. If you want to build a real project then you'd like to use something called development build. And basically what this does in simple terms is that it's going to take your application right and instead of running it within the expo go it will create this kind of a standalone application. Okay. And we're going to see it. I know that this sounds confusing for the first time for beginners, but I think that's completely fine. We'll see how that work. So, you would like to use a development build if you are building a real project. So, that's how I can explain it in simple terms. So, we have more questions. I'll just go ahead and choose the recommended ones so that we don't really waste too much time. But I think you're able to see the workflow. You will have all these questions so that AI doesn't really guess any feature but instead you are the one that deciding all of these. Now here it says what should a brand new user see when they follow no one. So basically when you sign up for the first time you know you are not following anyone and what you what should you see on the screen. So here you can go with the empty state. I'll just say seated demo content which means basically add some you know fake content or you know test accounts so that they can see some posts. I think this is going to be better especially for this tutorial. If I was building this as a real project I would probably go with the honest empty states. But here I'm going to select this one. And here it says should messages include unread indicators? Um, I think for now we'll just leave it as bare chat list. Maybe at some point we can add these features but for now we'll just leave it simple and choose this option. And here it says will you able to so this is the other question that I just got and this will be my answer here. I'll say for now we will just use clerk authentication with public key and this is something that we're going to get into. Basically, clerk will give you an environment variable and it's going to be our public key that we can use in development. I'll go ahead and submit this as well. Off camera, I have answered some more questions. And here's the entire thing. You can pause the video and read it. If you're building a real project, this is exactly what I would do. And here now it says, "Ready for me to turn this into an implementation plan." Here I'll just say for now go ahead and create this under a file a markdown file called plan.md kind of like readme.md. But here I should be able to at least see it. So here I'll just say for now create a plan MD file with all the details so that later we can you know implement this step by step. So I'm going to run this. It will create that plan MD file and after this I'm going to leave this lesson right here. In the next lesson we're going to get started with the UI design. And for this once again I'll provide a prompt that will help us to generate really nice looking UI designs. And once we have the design then we'll go into codex and we're going to break it into features like first we're going to build the authentication and then you know let's say the database connection so on and so forth and I'm going to get into that in the next lesson. For now let's just wait for this to create the plan. So here it says this is the entire plan. It is trying to still write it. Once it is done, I believe we're going to get the plan MD file. All right. So here we have the entire plan. You can take a look at it. You will also have your own plan. Here it says, do you want me to implement this? And I say for now only create the file later. I'll ask for implementation. So here turns out it can't create the plan. MD while we are in the plan mode. So here it says just deactivate it. If you press this plan mode is gone. And here I'll just say I or I'll just say do it now. So within the next 2 minutes it has created the plan.md with the entire details. You will have the exact same thing depending on the context that you given to AI. Okay. So I think we can end this section right here. But just before we do so, what I'd like to do is committing everything and publishing it to GitHub. Now, I'm going to go ahead and close this. If you wanted to, you can ask AI to do it for you, but for the first time, I'll just do it manually here. Uh, first off, let's go into GitHub. If you don't have an account, go ahead and create one. It's completely free to get started with. And then just press new, create a new repository. Then you will be on this screen. You need to give it a name here. In my case, I think I'll go with something like so. I think I'll go with this name. And for now, I'm going to make it private, but at the time that you are watching this video, it's going to be public and free. But for now, we'll go with private. Yeah. Other than this, you can leave everything as it is and create the repository. Now, it's going to give us a command, which is this part. We're going to copy it and paste it into our terminal. So I'm going to first copy this and go into VS code. First I'm going to stage everything. So under this tab, press this button where it says stage all the changes and then let's create a commit message by pre by pressing this button. So AI will create the message. Technically you can type anything but it is just better to use this feature of AI. And now we're going to commit this. And let's try to publish the branch, I would say. But first, we need to, I think, go into our terminal, kill this, clear this up, and then paste this in that we just copied. Now, what this does is basically taking all these local changes that we have in our laptop, in our machine, and push it to the to the repo that we just created. So notice how once this is done successfully, you'll be able to reload this and see everything like they are literally right here. Okay, so we had all these local changes. They are now live on GitHub. Okay, so I think I'm going to leave this lesson right here. Remember this is one of the most important steps when you're building an application. So I think you should spend a lot of time while planning your application. So instead of just jumping into coding immediately, you should you should spend a lot of time and talk with AI just like what we have done in this lesson. Okay. So with this I'm going to see you in the next lesson where we will generate the UI design. All right. So this is where we left in the previous lesson. We have planned our project. Now it is time to get started with the UI design. Now for this I already have bunch of different prompts that I used that give me really really nice looking designs and now we're going to use a similar thing. So here we have one design for AI trip planner application. We have another one for recipe app and this is the prompt that I used to get that design. Same thing for a dating app. Then the actual UI design for my mobile application and then at the end for the dental application UI design. You can find this link in the description. I'm going to leave it. Um, let's scroll to the top and basically I'm going to copy this entire prompt. But now remember this is for the trip planner application but we are building for something like a social media application. So what we'll be doing is first copying this prompt going into chat GPT or Gemini whatever you're using paste the prompt and then we'll say depending on our plan which is right here. So copy it we'll say depending on our plan give us a prompt like this one and once we have the prompt we will paste it into a new chat that will generate the image for us. So, I'm going to go ahead paste this in, which is my plan. And then here, I can say something like, depending on the plan that I have, I want you to generate me a prompt like this that will generate a UI design. Okay. Once again, basically it's going to read our plan and depending on the plan, it will give us a prompt like this so that we can go into a new chat and generate an image. And there is a new model that GPT just released which is image 2.5. It looks really really nice. I already tried this out. Um let's just say create image. And then once we have the prompt, I'm going to copy it and paste it. But looks like this is trying to generate the image. Well, not really. It wasn't an image. So, it was a prompt just like what we asked. So, I'm going to go ahead copy this entire thing like up until here. And I'm going to paste it right here. All right. So, after some time, this is the end result that I got from GPT. I think the UI itself is looking pretty clean and crisp. But there are a couple of different things that I didn't really like, which is the icon. So here instead, I'd like to have a camera icon. And I will also say that, you know, this is the design system. I wanted to upscale it. Here is my prompt. You can do a similar thing. So I said, "This is a good start, but I want you to update the logo from the sea letter to a camera icon. similar to Instagram but a little bit different. So do not copy it exactly. Also upscale the design system as a separate image. So I'm going to go ahead and run this. Now once we have the design system, we'll go into VS Code. Let's create a folder called design. And within this, we're going to have the design system. We'll attach it. And we will also have each of these screens upscaled one by one. So this is my workflow. Let me show you that. So we will generate the full UI design which is kind of like what we have done right here. Right? And then we're going to upscale each screen like one screen at a time. Let's say first we will upscale the authentication and then I don't know like the onboarding profile so on and so forth. And we are going to build them one by one. I think we can start with the authentication screen. And I believe right here we should have the oath screen. Let me try to zoom in. Yeah, but like this doesn't really good. Uh this doesn't really look that good. I think this text is unnecessary. But yeah, like we'll just try to follow up with the GPT couple of more times until we get something that we actually like. Now, this is the thing about AI. Most people just try to get the best result in the first shot and if they don't get it, they kind of like give up. They're like AI sucks. It's not really good. But dude, like it's just AI at the end of the day. You need to follow up couple of more times, give it a reference, you know, so you can get something that you actually like. In this case, I didn't really like the authentication screen design. So I'm going to follow up in a second. All right. So after some time this is the image that I got here. You can tell the logo has been updated and then I think we also have the design system which is kind of like upscaled. So we can copy this and paste it into VS code in a second. But here I think you know as I already told you I didn't like the authentication UI screen. So here you can tell this is my prompt. I just said give me a different variation and upscale that image. also upscale the design system. So, for some reason, initially I didn't see this one. Um, but yeah, I'm going to go ahead and copy this image and I'll paste it right here and let's just say design system reference. Now, the reason that we generated this and also the entire design is because like our AI agent can take a look at it and see all the components, all the colors like fonts, literally everything that it needs because here it's going to be harder to find it and it doesn't really include everything. And now I'm going to copy this image as well. Let's go into VS Code. I'm going to paste it right here. And let's say this is the oath screen design or you can just say reference as well. This is what I usually like to call it. Now with this we can literally go ahead and ask AI to build this design. And for this again I have a kind of like a special loop that I'm going to show you in the incoming minutes. But for now that's the authentication screen. After authentication what we can create. Let's take a look at it. um we can create the profile screen or the home screen, but for now I'm just going to copy this entire image. So I was just saying that I'm going to copy this image and I'll go into VS Code right here. I'm going to paste this and I'll say the design reference or let's just say app design reference. Okay, now this is the entire design, right? This is the design system and this is the authentication screen. Anytime that we want to build one screen at a time, we'll be using you know this kind of images. We are going to upscale every single screen. Now you might be asking how can we get this demo image so that we can use it in the authentication screen. Well that's a nice question. What I'll be doing is going into GPT and I'll say I want you to generate me the demo image that you're using in the authentication screen. Okay. So it's going to generate that image so we can use it later in the authentication screen. So I don't know why but initially it has generated this image which is something that I don't really like because this is what we'd like to use in the authentication screen. So I took this screenshot. If you're on Mac it's going to be command shift control and 4. Okay. So command control shift and 4 is going to allow you to take the screenshot and then just paste it right here. So I said I I meant this one and then I also said you know make the background to be transparent so that it matches the white background of the application. Okay. So basically we don't really want to have this background on the image. So this is the end result that I got. I'm just going to copy it and paste it right here. Let's actually put it under the assets images. Ctrl +V and let's say oath demo image. Later in the video, we'll be using it and I'll show you how to attach it to the Codex chat. Okay, so that's my design workflow in simple terms. Now, I could have made this a lot longer than this. I can explain every single detail like how we can create every single screen, how we can upscale them, but that's really the basic gist of it. Now, you need to do the same thing over and over again to generate all these images. And actually, like later in the video, you're going to see that we don't really need to create all of them at some point because we're going to have enough design references and Cloud will be able to build the other screens just by looking at this image. Okay. So, with this in mind, I think I'm going to end this section right here. This has been like 10 minute lesson, I believe, or something like that. 10 to 15 minutes. I'm going to go ahead and stage everything. We only have some images and we're going to say get a commit message. Once we have the commit message, we're going to go ahead and commit and we're going to say sync this up. Basically, it's going to take these local changes and push it to our GitHub account. Let me actually show you that. So, it was called as Codex Graham. So, I'm going to visit that repo. And here you can tell we just got those changes just now. Okay. So with this I believe I'm going to see you in the next lesson. All right. So in the previous lesson we have generated the design for authentication screen. Now let's go ahead and see how we can take this and convert it into reality. So there is a loop that I always use which is basically we ask cloud to take a screenshot from the simulator. Right? So let's say this is our authentication screen. We say take a screenshot and compare it to the end result until they're identical. Go ahead and do it, right? So this is like a loop. First we say go ahead and build the authentication screen. And here is the workflow. Take a screenshot from the simulator and compare it to the actual design. And if it is identical, just stop. If it is not, then keep going. Right? So this is like a loop. It is going to run a couple of times and once it is done once it is identical we'll just say okay um I was saying once it is identical just move on with the next feature or the next screen whatever that is okay so with this in mind let's go ahead and talk with claude sorry with codex in this case I'm not using claude but you got the point here I think I'll just open up a new chat and here I'll just try to explain it. All right, so I just paused the video and explained it. You can pause the video and read it. Basically, this is exactly what I just explained. And I'm going to go ahead and run this. And let me just double check if I'm running the application. I think I don't. So, I'm just going to say MPX Expo. And I'll press R or you should press I if it is not running in the simulator. Now, it is right here as you can tell. Now while this is trying to build it, we can create the we can create the clerk application. So clerk is going to be the authentication service that we'll be using. It is completely free to get started with and you don't really need to pay anything like you don't even need to put in your credit card information. So just go ahead and create an account and then right here you can create a new application. In my case I have bunch of different apps but let's let's start from scratch. Let's give it a name. I'll just say Codex Creme. You can call this anything. And then just add the sign-in options that you would like to have. In my case, I'm going to disable the email, but I'll just have Google as well as Apple. Now, one thing that I want to mention, if you include like if you include something like Google authentication, then you have to have Apple authentication as well, right? So basically Apple tells you that if you include any other social integrations for the authentication then you have to have Apple as well otherwise your application will be rejected and we'll go ahead and activate both of them in clerk dashboard and we'll say create the application. Okay, so here they have bunch of different SDKs lit literally for everything. But in our case, we're going to get the expo SDK. Now you can copy the prompt and just let AI to set this up. And this is actually what I'll be doing. But if you would like to see the entire manual setup, then just press here. Then you can go through it. What I'll be doing is just getting the environment variable. So I'm going to copy it and I'm going to go right here. create the env file and I'll just paste this in. So we have a publishable key. Basically with this key we can connect to this application that we just created. You can think of it in that way. And I think I'm going to copy this prompt. But I'd like to implement authentication a bit later in the video. For now let's just set up the UI design. and I'll just be right back once this is completed. All right, so after around 4 minutes, we got the end result. I think this is looking pretty similar to the design that we attached. Let me just actually find it. Okay, so it is almost identical. Like we have the three dots which is right here, icon, logo, um literally everything. What I'd like to get rid of is maybe this text. I think it is just unnecessary. So I can search for it and delete it myself. A social app trusted testers. So let's find it. And I'll just delete this text. I think it is unnecessary. But other than this, I think this looks pretty clean, especially for the version one. Maybe later at some point we can update it. Um, but yeah, for now I'll just leave it as it is. Now, let's go ahead and get this prompt. I'm going to copy it and then I'll paste it right here. And I'll say implement. So, I just said implement authentication with clerk. And here's the entire documentation. And again, I'll just be right back once this is done because currently if you press, nothing happens. But now Codex will implement it and it should work out. All right. So here you can tell it has built it and now it's even using my computer and testing out by itself. Like this is Codex. It has clicked to it and now I think it's going to go ahead and say continue or cancel. Like it's literally testing this out. Now, what I'll be doing is basically just stopping this process because I believe it is already implemented successfully. I'll just go ahead and test this out. So, I'm going to press this button and let's say continue. I already have an account that I signed in in the past. Um, like what is going on? Let's just say cancel. And wait, I think I'm just going to close this first. And okay, so I believe like here you can tell we got the Codex Graham and this is the development build. This is something that I have briefly mentioned in the past but I never told you how we can get this. So I think you know as you can tell Codex has already got the development build but let's say you don't really know how to do it. I'll try to explain pretty quickly. So first off there is something called expo dev client. This is a package that you can take a look at it or a module. You would copy this, okay, and paste it into your terminal. MPX expo install expo client. Once you have this, you would go into your terminal and let's say you would just open up a new terminal. Okay? And then you would say mpx expo run iOS or Android if you're building it for Android. So in my case, it's going to be iOS. And looks like Codex has already run it. If you take a look at it right here, I have an iOS folder, right? If you run it with Android, then you would have the Android folder as well. And what this is basically this is the entire application, right? But it is built under the iOS folder. So this is a development build. Now we can see it is right here. Okay? So it is much more than this but we can keep it like this to explain it simply. Okay. So from here on out whenever I want to run my application I'll just run it from here. I'm not going to go ahead and open up the XOGO application because as I said that's that was for testing purposes for small applications. Okay. I hope that this makes sense. Now, we'll go ahead and just say continue with Google. And before I say continue, if you press Ctrl D, you're going to get the developer developer tools. And here you can toggle the tools button, which is this one. This is just for development purposes. You will not see this if you publish your app to the app store. Okay. So, here you can toggle the state. You can have the fast refresh, reload, go home, basically everything. And now we'll just say continue with Google and we'll test out if the authentication will work. So this takes some time, but I don't know why. I'll try to control D and reload. Okay, now we'll try to sign up because if you currently take a look at it under the users, we don't really have any account. Oh, I think we have and I believe that's because Codex has test this out in the background. Um, but yeah, right here now we just logged in. We can sign out as well and we'll be right here. Okay, so that's the authentication. It is implemented in simple terms. You can also test out with Apple, but since Google is working like this is also working 100%, but I'm just not going to test this out. Um, with this, what I have done off camera is that I went into GPT into the same chat history. This is where we left. I said upscale the home screen, profile, and chat screens. generate each of them as a separate image. So, we have the chat screen, we have the home, and we have the profile screen. So, I'm going to copy every single one of these images and go into VS Code. Let's maximize the screen under the design. I'm going to paste. Oops. I'm going to paste this one. Let's call this as home screen reference. And let's go into GPT. Basically, I'll do the same thing for the other screens. This is going to be chat screen reference. And then finally, I believe the profile screen. Okay. Now the other thing that I have done is basically generating more screen. I said upscale the explore screen which is this one. Um it is this one. Then I said the edit profile sheet comment sheet and I said generate every single one of them as a separate image. So here you can tell we have the comments. So these are needed for GPT or CEX to copy it. So, what you would like to do is copying them and pasting it right here. I'll say explore screen reference. Now, I'm going to get the other images as well, but here I think I'd like to go into Codex and I'll say just like in the authentication screen, I want you to build the home screen where we have that loop. Right? So, I'll try to explain it. Let me show you that pretty quickly. Okay. So, I'll just say put yourself into this loop once again and build the home screen. For now, we don't have a database. We don't have any data. So, I'll just say create some test or some fake data just like one of these and build the UI. So, I just pause the video and get my prompt. And here, if you wanted to reference an image, which is home screen, you can just say add and then add the file name. So that's going to be home screen rev.png. I'll go ahead and run this. Once this is done, I'll just be right back. So currently it has built and it is still within that loop. Like it's literally trying to compare it to the end result and trying to fix the issues. And currently I can see like there is one issue right here. Um, it should fix that kind of like overflow. It should look like this. Um, so yeah, I'll just wait for this to be completed. Once it is done, I'll just be right back. But this looks identical. Like literally the exact same end result. All right, so GPT is done with it, but still there are some issues that it didn't really fix, which is something that you shouldn't really get mad at because it is AI at the end of the day. You should take the screenshots and follow up. This is what I do. Like I would literally take a screenshot and then paste it right here. And instead of um adding couple of updates or a couple of fixes in one prompt, what I do is asking for one fix at a time. So here I just took the screenshot and I'll say fix this overflow. Okay. So once this is done and then I'll follow up. I'll say um use the native tabs for these tabs, right? Once again, native tabs are something that we have in expo. You can double check this will give us the iOS liquid glass effect. If you wanted to, you can copy the entire page as markdown. This will get, you know, the entire page as a documentation and you can paste it right here. Actually, this is what I'll be doing. I'll say let's say something like convert tabs to native tabs. And here is the entire documentation and then you would paste this. Now I'm going to run this but let's first wait for this to be completed and I think it is already done. Now you know GPD is trying to use my simulator and test this out. Okay. So here you can tell I think here we don't really have an overflow but the image is not really like can you see the image has the black background which is something that we can fix. This is some hardcoded test data anyways. Okay. So I'll go ahead and run this now. In a couple of minutes the tabs should be converted to native tabs. All right. So after 5 minutes it was able to build the native tabs. As you can tell, it is looking really really clean compared to the previous version. Now, there was kind of like an issue here. You can tell the background was kind of like gray, but now it is transparent. That's because I asked it. So, here I took the screenshot and I said native tabs looks as I wanted, but remove the gray background. So, the rest of the application is visible. Right? Previously, here I had some gray background here. you can tell. Um, but now we don't really have it. As you can tell, it just fixed it under 1 minute. So, with this, I hope you are able to see my workflow. Now, in the exact same way, I'll go ahead and build the profile screen, you know, explore screen and even the messages screen. Here, I think I added couple of more images of camera. So, we had the profile home. I have added the edit profile reference, right? this screen. I have added the comment screen as well and I believe the chat screen. Okay, so these are some of the screens that I I have added off camera. Other than this, I haven't updated anything in the codebase. Now I'll go ahead and just say now do the exact same thing for the profile screen. Once it is done, I'll just be right back. So just for the record, here is my prompt. I said now build the profile screen. use that loop and here is the reference image that I just attached. All right, so in 6 minutes it was able to build and test that out. This is the profile screen. Now I just said build the edit profile and here is the reference image. So I'm going to run this once it is done. I'll be right back. Now you might be asking why don't we implement anything now. Well, that's because I think it's always better to have the entire the entire UI design and then it's going to be really easy to replace everything with the actual data. For now, like this is my workflow. I'm trying to get the UI design as much as possible. And once I wanted to implement the actual back end, all I need to do is just replacing this data with the actual data. Okay, so we're going to set up convex in the incoming sections. But for now, let's just go ahead and build most of the UI design. All right, so after some time, here we go. It's also been built. But I think having the sign out here doesn't make any sense. That's what we have in our UI design. So I cannot really blame Codex. But I'll just say delete the sign up button from here. Maybe we should have it under the settings. So basically when we press this button there should be some kind of setting screen and I'm going to get into that and I'm going to get into that a little bit later in the video. So for now I'll just say delete the sign up button from edit profile screen. And also what I'll be doing is taking a screenshot from right here. I'll just say replace the three dots with a settings icon. Later we will build that page. Okay. Now it says I have removed the sign up button. Yes, it is not here. And now we should update this part as well. Now while it is trying to update it, let's go ahead and say build the explore page. We already have something here but it is not the design like this is something Codex generated for fun in the past. Um basically I would like to get this one. So I'm just going to reference this. Let's say explore screen reference. Let's say build the explore screen. And here you can tell this has been updated to settings and we will implement it a bit later in the video. All right. So after some time the explore screen is ready. Here you can tell we're going to replace them with the actual data a bit later in the video. And after explore screen I just added the chat screen reference. And when I said build the screen as well. So we have a fake account or a chat. If we press that, we have the actual details where we can send the message. This is something again we're going to get into the details and the implementation a bit later in the video. But with this, I think we can leave this section right here where we built the entire UI design from the authentication screen to the profile and basically everything that we we would need for the version one. Now just before I commit my changes and end this section there is one thing that I want to talk about. Let's go into the workflow that we had so far. So we have built our plan. We have generated the UI design. We break it into features like authentication and UI design. So far we have only built these right. So you're going to build one feature at a time. That's what we have done. We built the authentication screen and then we have built the rest of the page. um sorry rest of the design we did like a selfch check we manually tested most of the things if they're working or not and it turns out everything has passed but now we need to run an AI code review this is at least what I do as a part of my workflow because it looks like everything is working but in my codebase there could be a lot of different security issues that I cannot really see. So for that reason I want to have an AI that can you know like scan my entire codebase and see if I have any issues or if I'm not following any conventions so on and so forth. Now for this there are bunch of different tools and one of the free tools that you can get started with is going to be code rabbit. It's completely free to sign up and you'll get like 2 weeks of free trial and I already have an account. So just go ahead and log in with your GitHub account. Then you would like to visit u this section where you have repositories. So once you're here, you can go ahead and add your repositories manually or you can sync all of them at once. This is what I have done. I basically have all my repositories in the code rabbit dashboard. Now anytime you would like to use code rabbit for the AI code review, you need to send a pull request or you can do like on the main branch as well. But I'd like to create separate branches. And if you don't know what that means, let me try to explain pretty quickly. So just imagine this is the timeline, right? And you're building features every single next day. Okay? So today you started with the authentication. Next you added the UI design. Next you add the you know messaging feature. And now you would like to add the video calling feature, right? But you don't really know if it is going to break or if your teammates will accept it or not. So you say instead of me updating the code directly, right? Instead of me updating the actual branch, let me go ahead and create a testing branch, right? And then here I'll add some changes like I'm going to add the audio calling and then video calling and then you're going to commit them. Now let's say you like the actual end result then you can send a pull request and you can say if you're working with your teammates you can say something like here I have built the video calling feature can you please accept my request and if they accept it now your changes will be added into the actual actual branch which is what we call either main or master. Now, let's say your team actually like this feature, they can accept it and then later at some point you can delete this branch and like you don't really need it anymore and your changes are right here. Or let's say they didn't really like it. They say this is breaking our code or I don't know we don't want to have video calling feature something like that. They're going to reject your pull request and then you can basically go ahead and you know delete this branch as if nothing has happened. All right, so that's the general idea behind it. If you're a beginner, like if you have never seen this before, it might feel a little bit abstract, but like that's the general idea behind it. You create separate branches, right? And you can add more features, then at some point just take it back or push it to the main branch. So just imagine like you are 10 different people in a project. Everyone can create their own branches and work on different features, right? eventually everything will be merged to the main branch. Okay, so I hope that's not really confusing. Now let's go into VS Code and see how we can create a separate branch and commit our changes. So first off, I'll maximize the screen and I'm going to press command shiftp or if you're on Windows that's going to be control shiftp. Then here you can say toggle status bar visibility from right here. I think excuse [clears throat] me I'm going to select create new branch by default I'm on master as you can tell in your case this might be main which is fine it is the same thing um just go ahead and say create a new branch and then let's give it a name I'll just say oath and let's say UI design all right so currently we created this branch right now let's try to commit our changes so you'll go right here scroll to the top stage everything by pressing this button. Let's get a commit message. So that's the message AI generated for me. I'll go ahead and commit this. Okay. And then we'll say publish this branch. Now if you go and take a look at your source code like just go ahead and reload. So this is still taking some time. Uh now we should have this new branch right it is right here for 4 4 seconds ago. I'll go ahead and say create a pull request. Now if you scroll to the bottom you'll be able to see how many lines of changes you have. You know like this is the amount of new additions and these are the deletions. And then you can scroll and see every single change that you have. Now instead of so instead of reviewing them manually, we'll just let AI to scan every single line and tell us what are the things that we can fix. I'll just say create the pull request. If you have set it up this correctly, right, you should be able to get a code review in a couple of minutes. All right, so initially this is what you're going to see and it's going to take couple of minutes. Once it is done, um you'll get the feedback from code rebbit. And once it is done, I'll just be right back. All right. So after 10 minutes, the code review is ready. Now we can scroll to the bottom and see every single suggestions that we have. So since we didn't really implemented anything important in our code other than UI design, we don't really have that big of issues. But here you can tell we have a minor suggestion and then another one. Yeah, I think currently we only have two. And if you want to fix them, you can obviously copy the prompt and paste it to AI. And you can also like see the problem why this is a suggestion like what code rabbit thinks and how can you fix them. Right now just imagine you have a 10 different suggestions. you don't really want to copy every single one of them one by one. So you can scroll to the top and you can just get the prompt for all review comments for AI agents. Right? So I'm going to copy this and let's go back into VS Code and like right here I'll paste my prompt. So this will go ahead and fix those issues. And once it is done, we can add another commit and then you know send it as a pull request once again. So currently we are right here. So we created our commit, we sent the pull request, right? And before we say merge the pull request. Um we would like to run these fixes. So here you can tell within the next 1 minute everything has been fixed. Let's go ahead and stage these and we're going to create a new commit. You don't really need to create a new pull request. So I'll just say sync the changes. If you scroll to the top now you're going to have that we'll have the two commits. Initially we had one. It just reloaded by itself. Now we can scroll to the bottom and just say you know merge this pull request. Now, code rabbit will try to give you another review because you just had a new commit, but we don't really need to wait for it because these were the suggestions that came from code rabbit. Okay. So, I'll go ahead and confirm the merge. Basically, we say yes, we are accepting this. Now, your changes will be on the master branch. Okay. I'll try to visualize it and show you every single step. creating the branch, adding the commit, sending the pull request, and merging it. Now, with this, everything is done. You can go back to your master branch. Just select this one and then press this button. Right, we're just going to sync this up. Oh, wait. We have a MV change. How come? Wait, what's the change here? I think we have the secret key. This is something that Codex added behind the scenes. It's not really that important for now. Just go ahead and press this button. You probably don't have this. I don't know. Uh just go ahead press this button and this is going to sync it up. Basically, it'll get the latest changes and update your codebase with it. All right. So, this is where we left. Now that we have most of the UI design ready, it is time to get started with the actual functionalities. So we should be able to create posts, you know, like them, comment, send messages, so on and so forth. For this, we're going to need a back end and basically a database. And for this, we can use Convex, which is completely free to get started with. You don't really need to pay anything. Here you can tell they have a really really generous free plan and I already have an account. If you don't go ahead and sign up then log in with your GitHub account and then you will go into VS code. Now you can ask AI to implement it for you. But what I'll be doing is just setting it up setting it up by myself so that you can see the process instead of just you know blindly vibe coding. Okay. So here I don't know what is happening with the terminal UI. Okay, now it's fixed. Now from here on out you almost always want to have two different terminals. In one of them you're going to run the expo application with MPX expo and with the other terminal you would like to run convex. Okay, which is our back end. So here go ahead and just type mpm install convex first. This is going to install the package and then we are going to run mpx convex def. So just wait for it. This will install the package. Okay. So this is taking a bit longer than it should. While this is installing, I have done something in the background which is basically generating a different logo. And because I didn't really like this one, so I went into GPT here. I'll show you the steps. So this is where we left, right? I I just said generate a grid of nine of icons for this app that I can choose from. And I didn't really like any of them. Let's say if I like this one, I would say upscale the option five. But clearly I didn't like any of them. So I just said give me a completely different style and vibe. again a grid of nine. From here, I like the option six. I just said upscale this and make it in the blue theme. This is what it gave me. Even though it's not the same thing, I still really like this one. And then I just said, you know, remove the background. So, this is one of the other processes that I just wanted to show you. If you want to get a different variation of something, just ask for a grid of nine instead of asking nine different times. So from here, let's say you like this one. You'll just say upscale this for me. [snorts] So with that in mind, you'd like to copy this image or the logo, right? I'll just go into my assets and I'll just paste it. Actually, under the images, I'll say Ctrl +V and I'll be using it in a second. So for now, we have the convex installed. Let's clear this up. You'll say MPX convex def. So initially it might ask you to log in if you're running it for the first time. But I have already logged in right and um this is going to be the next question that you're going to get if you are logged in. Um we would like to create a new project. So I'll just select this one. Let's give it a name. I'll just say codex gram. It is taking from the folder name. So I'll just press tab and I'll press enter. If you wanted to you can type something else to update this name. Uh, but I'll leave it as it is. And we would like to deploy it on the cloud. Just go ahead and press enter. And we would like to set up convex AI files such as agents.md and some skills. Basically, this will teach AI how to work with convex in the best way possible. Okay. So this will create couple of different files and actually most of them will be under a folder called convex. Okay. So our entire backend code will be under right here right and like we'll have schema we'll have different mutations queries and if you don't know what that means is basically you have queries to fetch data like getting the posts and to create something you would have mutations like creating a comment creating a post or deleting a post deleting a comment updating things like that. So for this AI will create some mutations for us. Okay, I'm only explaining this if you're just a vibe coder and watching it up up until now. Um I think these these would be helpful just to know. Okay. So with this from here on out always have this terminal open and you can rename it just by pressing enter or press right say rename. I'll just say convex. And you can rename this one as well. You can say expo mobile, whatever you'd like to call. Okay. Now, with this, what I'll be doing is going into a new chat. First off, I'll just say use the logo that I have right here. So, I'm going to call this as logo.png. And I'll just say use this logo.png png as my brand logo in this app. We can say something like replace the current one with this one. All right. So, within 50 seconds, as you can tell, icons have been updated within this application. Now, here I'm going to maximize the screen and here is my prompt. You can pause the video and read it, but I basically say now that we have authentication and most of the UI design ready, just go ahead and read my plan.md so that you know what kind of features we want to build. And then I say just go ahead and start implementing the post creation, likes, comments, and follows. And then I say, let me know if I need to set up anything from the clerk or convex dashboard. Okay, so this is what you wouldd like to do at the end. Just say, you know, like let me know if there is anything that I need to do manually from any of these dashboards. And I'll run this. Let's see what we're going to get back. So, while it is building, I just got asked a question. It says, is the Convex integration enabled in your clerk dashboard? If not, it says go under the integrations and find the convex. So here I'll go ahead and find my project. Go under the configure and then you can just search for integration. So go ahead and press this. It is under the developers. And then right here go ahead and turn this on for convex. And then go back into VS code here. Let's say it is enabled. All right. So after 20 minutes, looks like everything has been implemented just like as we requested. And it says you don't really need to add anything, you know, like nothing you need to do from the dashboard. And here you can tell if you remember, we said that user has to first set up a username to be able to use this application. So here it says first off, go ahead and add a username. Here I'll just try to put my name and let's put the last name. I'll say continue. It's going to create the profile. For now, we don't really have any data. That's why everything is empty, right? The UI is UI is filled in with empty state. Okay, let's go ahead and create a post here. I'll just try to select something from my gallery. Um, let's go ahead and select this one. And here I'll say something like this weekend trip. And let's put a three dots. I was going to say and I'll say publish. So here we had the indicator and looks like this has been uploaded. We can double check by going into our Convex dashboard. I'll try to log in now. Once you log in, go ahead and select the current application and make sure you're under the development. From here, I'll just say files. Here you can tell we have a file that has just been uploaded. Now, usually you can hover over this and see the end result. I'll try to install it. Let's see. Okay, here you can tell that's the image that's been uploaded to Convex. Now, with this I think we can also take a look at the data. Here you can tell we have bunch of different tables like uploads, profiles. This is the only user profile that we have. Now, you might be wondering how do we get this user right here. Right? And I think that's because we have configured the convex integration in clerk. So it is like set it up already automatically. Now let's try to test out some more features I'm going to like. Here we go. I'll try to add a comment. Maybe we have a UI glitch here that we can fix. I'll just say test comment. And actually at the same time I'll just take a screenshot. go into codeex and I'll say you fix the comment section. It should be a bit more spaced out from the bottom and then I'll try to post. Here we go. It is right here. Now UI is not really that great. Um, I'll try to kind of like format it. And what I'll be doing is actually taking a screenshot and I'll go under GPT right here. I'll paste in and then I'll say something like this is the current UI that I have for the post detail screen. I want you to give me three different variations of this UI. Um try to keep it simple and make sure it is matching with the blue color palette that we have already. Um yeah just give me three different variations. So this will give me that three variations and from from those three images I'll try to choose one and we'll ask Codex to implement it for us. Okay. So in the background it's going to go ahead and implement it. And let's see. Okay, that has been fixed as you can tell. In 30 seconds it is done. Now I can tell something like delete. If you say cancel, nothing happens obviously. But if you delete comment should be gone. Here you can tell everything updates automatically. Now one thing to mention about convex is that everything is real time out of the box. So here just imagine you write a comment and you have another simulator running right here. If they are looking right here on this post as soon as you post like they will see this comment on that other simulator in real time. They don't need to reload the application. Now one of the other things that I'll ask Codex is to add some seated data. If you don't know what that means, it's basically some hard-coded test data so that we can see how the rest of the application look like. So currently under the explorer, we only have one post. But how would it look like if we had like 20 different posts, right? So I'm going to say add some seated data. That would be helpful for me to see the rest of the app with a lot of data. So probably this part is not really that important but I'll just add it anyways and let's run it. All right. So it took around 10 minutes and here we go. We have now 24 fictional profiles. This amount of photos, you know, likes and comments. If you visit the explorer, you'll be able to see all these posts, different accounts. And if you press them, you're going to get the details with likes, comments, and you can also like or comment. So we have the home screen. This is how that look like. We have the profile. We're following this amount of accounts and sorry all the accounts are actually following us because this is the amount of profiles that have been created and we are following 12 of them. So I think that's a really nice start and we can go ahead and try to visit some accounts and actually try to follow them. Notice how, you know, UI is not the best, but we can always follow up and put CEX into a loop, which is something that I'll get into in the incoming sections, but for now, I think we can follow and unfollow. Um, here I'll just say unfollow. I don't know why, but it takes some time because I think it is running on the background. This is something that we can make a bit faster as well. Okay. So, with this I think with this I think I'll just take a quick break and then I'll just be right back. All right. So now let's go ahead and implement the chat messaging. Currently everything that you see on the screen is completely fake. Like this data is hardcoded. So here I'll just say implement the chat messaging and let's go ahead and reference this screen. So I'm going to say chat screen ref.png. Now when it comes to the this screen, it doesn't really look that good. So for this, I'll also provide some references. Now to generate a different reference for this screen, I took a screenshot. I went into GPT and then I just said give me a grid of three for this UI and then I just said make sure that it is matching with the rest of the design system. So it gave me three different variations. This is the one that I actually like. So here I just said, you know, upscale the variegation third. And here we go. We have it. Now I'm going to copy this image. Let's go ahead and paste it right here under the design. [sighs] I'm going to say something like messages tab reference. And let's try to shrink the left hand side. And here I'll also add the messages tab reference. And then let's say put yourself into a loop. So you can pause the video and read my prompt. But this is something that we have done multiple times at this point. I'll go ahead and run this and I'll just be right back once this is done. All right. So in my case, this took around 17 minutes. It has actually built it pretty quickly, but then it takes some time to test out every single thing just to make sure that this feature is working as expected. Now, what you see here is still fake data. And I asked because when I checked the database, let me actually display it. I didn't really see any messages and I'm like, what is going on? Right? So, I just went into VS Code. I said when we send a message does it get saved to the database or all of this data are still hardcoded and it says both of them exists basically since they are like demo accounts. What you see here is fake data but it says if you want to actually test this out go ahead and sign up with a different account and everything should be working out as expected which is something that I'm going to test out a bit later in the video. But for now, there is one thing that I have done off camera that I'd like to show you pretty quickly. Um, so first off, let me show you the post detail screen. This is currently what we have. And I didn't really like this that much. So I went into GPT. Let me show you that exact part. So here I took this screenshot and I said this is the current UI, which I don't really like. So I said give me three different variations and it almost gave me the exact same thing. So what I have done is attaching the design system and I said give me those three different variations depending on our UI sorry our design system. And from here I try to upscale the second variation which is this one. Like this is the one that I liked most. So here at the very end you'll see that I said upscale this second version. So I'm going to copy it. Go into VS code under the design. Paste this in. And let's call this as post detail ref. And then I'll put my simulator right on the side. And I'll just say, you know, go ahead update the post screen just like this one. And one thing I realized is that I don't really want to copy everything exactly as is because I think this header part is looking better than what what we have right here. So what I'd like to do is actually copy this um bottom part and paste it right here. I'll say only update this part. Right. So here I'll take the screenshot. So here's my prompt. You can pause the video and read it. I tried to basically explain what I just said. And I'm going to run this. Once this is done, I'll just be right back. All right. So within the next 10 minutes, it was ready here. You can tell the actions, the comments, almost everything is identical to what we have right here. I'm pretty happy with how that ended up. So I'll just not follow up with any other improvements when it comes to this screen if you wanted to. You can of course do it anytime you want. Now we can add more features and I think I'm going to get into that in the next sections. But for now what I'd like to do is running this application in my actual phone. Right? So instead of running it only in simulator, I'll go ahead and install this development build in my actual phone. >> [snorts] >> Now, there are two different ways of doing it. The first one is connecting your phone with a USB cable to your Mac, right? And then you would run this command. Now, I'll just open up my terminal and let's go under the Expo terminal. Let's clear this up. Let me maximize the screen. You would say MPX expo run iOS just like previously. This is what we have done. But at the end, you would say d- device. Now, if you have your phone connected with USB cable, you're going to see it right here in one of the options. So, mine is not connected, but since I have done it in the past, it shows me this. And the other way of running this is that you would use Expo EAS. If you don't know what that is, let's go ahead and double check. So, I'll just say Expo EAS. So, Expo application services. This is a service that allows you to run a development build in your phone. This allows you to, you know, publish your app to the App Store, Play Store, literally every single service that you can ever imagine. Now, you don't really need to learn everything from absolute scratch. Just go ahead and explain it to Codex or Cloud for this current use case, and it's going to give you all the steps. Now, of course, I would say if you're interested or if you are serious about mobile development, just pause the video and go ahead read this entire page, take a look at the documentation, and then come back. But if you're just here to test things out, then you can just go into Codex or cloud and ask for the, you know, the instructions. And by the way, what you see here on the screen is for Apple developer program. Basically, this is something that you need to apply if you want to publish your app to the app store. Apple wants you to pay $99 per year for this program. And you know, if you live outside of US with, you know, in a country with lower local purchase, then this price will be discounted for you. So, I think you'll get something in between 20 to $25 [snorts] or really, you know, it's going to depend on the country that you live in. So, I'm from Turkey. When I applied, I paid something between between this amount, but you know, if you're in a different country, it could be even lower than this or a bit higher than this. So, I don't know, maybe it could be $50 or maybe even like $10. I don't know. Uh but this is something to keep in mind if you actually want to publish your app. This is something that you have to apply and unfortunately this is not something that I came up with. Uh this is something that Apple wants you to apply and pay for. Okay, just keep this in mind. This is something that I wanted to mention. You can always double check just before publishing your app. Okay, so with that said, now I'll go into Codex. I'm going to kill this terminal by the way. Here I'll say I'd like to get a development build and install it in my phone and I'll say I want to use EAS right expo application services. So I'll say what I need to do give me everything step by step. Basically you need to run a command in your terminal. I already know what that is but here I'll just act as if I don't know it and I'll try to show you what what you should do in these type of scenarios. Okay. So here you can tell this is my prompt. You can read it if you're interested. I'm going to run this and we're going to get a prompt or a command that we can run in our terminal. And this will create also a file called EAS.json. Currently, we don't really have it, but we're going to get that. And it is like the configuration file that EAS need. Okay. So, I'll just wait for this to be completed. And once again, remember there are two different ways that we talked about. The first one is running this command with the device flag and plug in your iOS to your Mac, right? And I mean iPhone, not iOS. But you got the point. That was the first way. The second way is using EAS. This is what I'll be using. And in this way, you'll be able to see the entire process. All right. So, here we go. We have all the instructions. This is the things that you would run for the very first time. But since I have already built different mobile applications, I already have the device connections and you know I already logged into EAS initialized it etc. So what I would do is scrolling to the bottom and then I just said give me the command to get a development build on the cloud. So I'm going to run this. But once again, if you're doing it for the very first time, you need to log in in it and create that connection to your device. So everything that it gives you here will be correct. And you can always follow up and say, you know, like I am a complete beginner. I have never done this before. So tell me all the steps that I need to do. Okay? So this is just something to keep in mind. In my case, I want to get it for iOS. But if you want to get it for Android, leave everything as it is, but update this part as Android. Now I'll go into my terminal. I'll paste this in. And it'll ask me a couple of different questions. Um, looks like this has failed. Says invalid version. I'll just copy this and paste it right here. So after I just paste this to CEX, it has given me the solution. Basically, it has fixed the cache and then it says rerun this. This is exactly what I have done. I basically rerun this command. Now, I'm going to get bunch of different questions. You're going to get the same questions. Just go ahead and press enter a couple of different times until it starts to build. All right. So, as you can tell now, it is uploading to the EAS. You can always go into your actual dashboard. Let's actually see it. I'll visit expo.dev. dev and here I have already logged into my account here. You can tell these are the previous projects that I created. Now we just got the latest one just now and if you press this you can see that we have a development build that is getting created right we are getting this build. So once it is done we should be able to install it to our actual phone. So in my case it has failed which is completely normal and here is the fix. You would go right here and let's find the step that it has failed for the first time. Like it was going successfully right here. It has failed. So I'll just press this button which will get me the logs which is basically the details. If you don't know what that means, I'm going to paste this in and I'll say like you don't need to even say anything, but I'll just say my dev build failed and here are the logs. Hopefully, this should give us a fix. Once it is fixed, we are going to rerun this. All right, so here we can tell that this has been fixed. It says go ahead and rerun this command. But I also realized that we have a lot of different changes. Now, as far as I know that we have to commit these to get a EAS build, but I'll just double check. I'll say I have uncommitted changes. Do I have to commit them beforehand? Like I believe we have to commit them because EAS would get a snapshot. Um, but looks like it says no. Okay, so that's fine. Maybe I'm just wrong. I'm going I'm going to go ahead and clear this up. I'll paste this and again I'll press enter a couple of different times. We're going to get a new development build. Like you should be able to see the new build right here. So here you can tell we have the build again. It is getting built. Let's just wait if it is going to fail or not. I'll just be right back. All right. So after a couple of minutes, the process will be ended successfully and you're going to get a QR code. Now I just scanned this in my phone and this is what I got. Basically it has installed the application and if you press that you're going to get this UI. So here you can tell we have the logo, the name and it is trying to find the development server. Now let's say you are confused and you don't know how to run the app because it doesn't run it by default. You can just say now in my terminal I have a QR code. How do I run this? Like what do I do? So here are the steps that you will do. First off scan the QR code. It's going to install the build and then under the settings privacy and security you need to have the developer mode if this is prompted. If not it's okay. Then you need to just go ahead and run this on your Mac. So basically scroll right here and run this command. Now even after running this command if you see the exact same end result then go ahead run the same command with the tunnel flag. So this is what I'll be doing. I will run this and then at the same time I'm just checking my phone. So I'll open up the application. So currently you don't see but I have my phone. is right here. I'll try to actually visit this app. Okay. So here again I have the same UI but this time I will fill this in with a value. So here you can tell it says it should start with HTTP and you can find it right here. So after the URL just copy this part okay up until the direct included. So copy this and then go into your phone then just paste it. So I just pasted it. As you can tell it is trying to build and let me open up my camera and actually show you that. Okay. So here you can tell I am in the loading screen. Currently it is loading and our application is live. So here you can tell that's the authentication screen. Like literally everything is right here. I'll go ahead and try to log in with my Google account. Here it says continue. And then let me just log in with one of my accounts. Okay. So here it says you need to put in a username. Let me just put something like my phone. I'll continue. And let's see what we're going to get. Okay, so our feed is empty because we don't really follow anyone. But if we go under the explore screen here, you can tell we have literally everything. So it is working just like as our simulator. I'll try to go ahead and send messages. But first, let me try to add these accounts. All right. So, here in my phone, I went under the explorer and right here, I search for this account, which is this one. Right. So, I'll try to follow him now. And as soon as I press the follow, notice how this updates automatically, right? So, everything is working in real time. I'll try to unfollow. Um, I can't press. I just pressed and notice how it's been updated. I'll try to press again and just watch here. It is updating in real time. Now let's go ahead and send a message. I'll go under the messages in my phone. Let me just send a message to this user. I'll say hey. And as you can tell in real time, we just got the message. And here I'll say like I'm texting again. I'll say how are you doing? Like as soon as I send it is right here and let's send a message from here as well. If I send it in real time so everything is working as expected. Now other than the messages everything else is also working in real time. So here notice how we have only one like from my phone. and I'll try to like it and as soon as I like notice how it is getting updated. I'll try to add a comment. So I'll just say hey as soon as I post it is right here. So that's the beauty of convex. All right. So with this I think I'm going to leave this lesson right here. Now we can improve the UI a lot and this is something that we can do in the incoming lessons and also we can add things like privacy policy, terms of services, a settings screen, so on and so forth. So these are the things that I'll leave for the incoming sections. But for now, let's just go ahead and commit our changes and basically end this lesson. Now, I think the beauty of this lesson or the key takeaway here is that you have learned how to get a development build and how to install it in your actual phone. Okay, so we'll go ahead and even like kill everything. I'm going to stage every single change and I'll get a commit message. Now, if I was building it as my real project, what I would do is again running a code review just like here in our workflow by creating a pull request. But in this case, I'll just go ahead and commit this on the master branch so that we don't really waste any time. So, I'll sync this up. And here you can tell I have a popup from the Code Rebbit extension, which is something that you can get for free in VS Code. Just go ahead and search for it which will be code rabbit. So you can install this and it will work out of the box. Okay. So with this hopefully Okay. So with this hopefully I'll see you in the next lesson. All right. So this is where we left off camera. I have done some small things and I'd like to walk you through it like what I have implemented in the background. So first off in the explore screen we didn't really had this UI previously. It was just the images only. Now what I said is basically I give the reference image and I said put yourself into that loop until you know we have the exact same end result. And we have used this loop multiple times. So I'm not going to explain what is going on here. So it took around 13 minutes and it was ready. This was oneshotted without any issues. Now there are a couple of different things that we need to update such as the icon. it should match with the, you know, the updated icon that we have right here. And also, when you press this, the icon changes. This is something that we can fix a bit later in the video. Okay. So, other than this, I said do the exact same thing for the home screen, but do not change the icon here. You can read my prompt. And I also said implement the stories feature. And actually it is working like I have already test this out and I have posted something on my story and let's actually test it once again. Here you can press the button and select something from your library or you can choose it from sorry you can take it from your camera. So here I'll go ahead and maybe post this one. Now one thing I'd like to say before I publish this in the very first version we were able to write a caption in this story. So I said go ahead and delete that feature from the stories. And I also said you know allow us to take the photo from camera not only from library and then I think I said in the post creation keep the caption but also add the camera option. Okay. So I'll go ahead and publish this. This will take some time but here we go. If you press here now we have two different stories just like in Instagram. You can go back forward and if you press again if there there are more stories it's going to go to the next one. Okay. So that was the very first thing that I have done and I think I run one more thing which is the profile screen. So again I just said you know put yourself into that loop and build the profile screen. Now here notice I didn't say put yourself into that loop and and the reason for that is like every single time I don't want to explain this entire thing. Let me show you. So every single time I don't really want to say put yourself into a loop where you take a screenshot from simulator and compare it to the reference image and keep building until it's identical. So like you need to create some kind of reusable component or a skill in this case and I'll show you how I have generated it. So you don't really need to type this every single time. Okay. Now for this I'll just go into my like how do we call it the file explorer and under the cloud we have skills right under the agents we also have skills. Now the difference between them this one is only for cloud but this is for literally any other thing like codex cursor you name it for everything but this is for only cloud now I have added it in both of them just in case if you're using cloud or codex uh but yeah basically under the agents we have skills if you scroll to the bottom I created this file sorry folder and then the file called skill.md And let me show you the file content. So this is something that I have generated with codeex. Basically I said every single time I don't really want to type this, right? So I said create me a skill and put it under the agents folder as well as the cloud folder. So this is literally what I have said like I went here and then I said I don't want to type this every single time. Can you please create me a skill? And this is exactly what is happening in the background. So you're going to take this entire file and put it in your codebase if you really wanted to or I would say just take this as a challenge and go ahead and ask for Codex to generate the same thing for you. Okay. Um, so once you have this, you can create a new chat and just say something like, you know, make sure profile screen looks like this image and just send the prompt. You don't need to say, you know, put yourself into that loop because since this is a skill, it'll be already attached to the, you know, at the beginning of the conversation. Let me try to kind of like visualize it. So, let's say this is your first chat. You say go ahead and build me a profile screen and then it says okay I'll build it and then you say something else and and then it'll do something else right now here at the beginning of the chat the session that skill will be loaded automatically so that's the beauty of creating a skill and here I just left a comment kind of like how can we make this loop reusable well you would create a skill explaining everything and the beauty of this is that you don't really need to type everything by and you will just explain it to Codex or Claude or whatever and then you'll just say create me this skill. Okay, so I hope that helps. Now with this I have the profile screen. It is also looking pretty similar to the end result. Now here I said go ahead and delete the search icon as you can tell and I also said replace this with the settings icon and we are going to build a settings screen right here. Now here we can edit our profile, share the profile and sign out. Now I think I'll just say delete the edit profile button from here. Also the share profile, we don't really need them, but what we need is delete account and sign up buttons. Now you might be asking why do we need the delete account button? Well, it is mandatory and if you don't have it, Apple will reject your application because you have authentication. You're storing user data. When this user wants to delete their account, you need to give them the access that permission. So here, I'll go ahead and type my prompt. I'll explain everything and then I'll just be right back. Now, actually, instead of going into Codex and putting a prompt blindly, what I have done is something even better. So I went into this chat that we already had with a GPT that is about design. So I said I want you to give me a grid of three for setting screen. You can read my prompt but basically I say give me things like we have privacy policy link, terms of services, delete account, sign out and some of the other things that you would need in a social media application. Okay. So if you're wondering why do we need privacy policy and terms of services? Well once again this is something that you must have. If you don't link them then your application will be rejected. Also when you publish your app to the app store Apple will ask you to provide these links. So basically you need to you need to build a privacy policy terms of service and deploy them on a live URL. I'll try to show you how to generate them and publish them on the internet so that you can actually use those links. Okay. So between these three options, I like the very first one. So I just had upscale the variation one. This is what I got. I'll go ahead and copy and paste it under the design. You already know what I'm going to do next. So I'll just say go ahead and build the settings screen. Let's actually say settings screen reference just to be consistent with the rest of the names here. I'll just say settings screen ref. And let's say build me this exact UI. Yeah, I think for now I'll just say build me this exact UI. I'm going to send my prompt and I'll just be right back once this is done. So after around 4 minutes, this is what I got. And here I just said go ahead and delete this header part. We don't really need it. Now this should be done in couple of seconds. And I think overall I'm happy with the end result. Like you can always improve the UI, but that's not the goal of this tutorial as you already know. And one of the other things that it kind of failed like we don't have native tabs anymore. So I think for this we need to just simply tell also bring back the native tabs. Let's say remember we always want to use native tabs. Now while this is building I just want to mention that currently we are using AI in the very bad way. Like this is not this is not optimal. It shouldn't really go from native tabs to the JavaScript tabs. For this, I should have already set up a file called cloud.md or agents.md. So here you can tell we already have these files. Now let's talk about these files pretty quickly. In simple terms, they are just a readme file for AI agents. So here we have readme.md. This is for humans, right? This is for developers. But these are readme files for AI agents. There's a difference between them which is something that I'll get into in a second. But first, let's just read what they are in the first place. So, both are plain markdown instruction files that get autoloaded into the AI's context at the start of a session. They are, let me just clear this. They are where you put project conventions, architecture notes, something like always do this, never do that, these type of rules. So in our case, we could have just said always use native tabs, right? Never use anything else for the tabs. This is where you would put the instruction. Now the difference between them is that cloud.md is for cloud and agents.md for literally anything else. Okay, but I think cloud would still support this. All you need to do is adding all your instructions right here under the agents.m MD and under the cloud MD just go ahead and import it. Okay, so that's all you need to do. And this is a convention by the way here I have explained it as well. Put your actual instructions in agents.md and make cloud to import that file. Okay, now I think we we know the difference. And here when I ask AI to implement the native tabs, I said we always want to use native tabs, right? And here it says I have updated it under the agents. MD. So if I go under the agents.md and search for native tabs, here it says always use export router native tabs. Okay. So once again, I'll try to visualize it pretty quickly. When you start a new session with AI, you're asking a question, right? and then you are getting a result. Let's say you just say build me authentication and then it builds it. You say build me profile page and then you get the end result. But at the beginning there is agents.md that is automatically loaded to the context. This is what we explained. Okay. So I hope now we understand the agents.md file and what's the difference between them. Now what I have done off camera is going into VS code and then I just said now go ahead and implement the account deletion. When we press this delete account button here it says you need to add the clerk secret sorry clerk secret key to the dashboard. This is what I have done. I just went into my project settings environment variables and then just get the clerk secret key and paste it right here. Now how do you get this value? Well, you can go into clerk expo documentation. So from here, let's just find the environment variables. Just select your project and then you can also press the API keys by the way. So here you have the publishable key, but we need the secret key as well. So it is right here. Just go ahead and copy this value and paste it right here. So you can just say add and paste this value. It should be right here. Then save. This is exactly what I have done. I said I have added it. So I said that's done. Go ahead and implement it. Now looks like this has been implemented. I'll say delete the account. If I say cancel, nothing happens. But if I say delete, it should actually delete the account and sign me out. Let's go ahead take a look at the dashboard. Okay. So previously we had two different users but now we have only one. All right. So I think with this I'm going to leave this section right here. In the next section we can build that privacy policy in terms of services. And again for this I have some pre-made prompts that I'll share with you. But for now I think if you wanted to you can pause the video and improve the UI as much as you want. But I don't want to waste any time. Um I'll just go ahead and let's close everything. and I'll just commit my changes. So, let's stage and get a commit message and I'll sync this up. Okay. So, with this, I'll see you in the next lesson. All right. Now, let's say you build your application and it is time to get started with the legal pages. Like what you need to do is pretty simple and here I'll just try to walk you through it. So, first off, let's talk about some of the must-h have features that you should have. One of them was the delete account button, which is something that we have implemented. The other one is the Apple sign in option. Again, it is right here. This is basically something that you have to have if you included any other different social login options. So, in our case, we have Google. Then, Apple says you must have sign in with Apple option as well. Now, on top of privacy policy and terms of services, we also need to add a support URL. This is something that Apple will ask you when you go into the Apple dashboard. Okay. So, I'll try to explain it in a little bit. Okay. So, with that in mind, now let's go ahead and create the privacy policy, terms of services, and a support URL. And in the past for one of my past tutorials, I have built a landing page like this where we have some demo images that is looking pretty cool and we have like more details. And now I'll just show you how you can generate these type of mockups in like less than 5 minutes. Okay, so with this in mind, on top of this, I'll provide you a terms of services prompt. You can find this. just go ahead and copy it and we'll go into Codex. Let me just create a new session now. Okay. So, this is something I'll just delete. I don't know why, but in the past, looks like I have it. So, I just deleted that. And here, I'll paste this in. What this does is basically it says go ahead and read my entire codebase and depending on my project, create me a terms of services page. Right? And here I'll say um like put everything under a folder called legal. Let's actually create that. So I'll say put it all under the legal folder and actually build me a landing page as well. Let's say make sure it looks pretty good. Now, of course, this is not the best prompt, but I just want to see what it can give us in the first try, and then we can always follow up and add some references. Now, before I run this prompt, what I'd like to do is actually preparing these demo images. So, for this, there is a website called shots.so, which is completely free to get started with. They [snorts] have paid plan as well, but you don't really need to pay just to create these images. Okay. So, head over to this site here. I'll just say start over. This is what you're going to see initially. From here, go ahead and select a mockup. In this case, I'll just get iPhone 17, I believe. You can select anything really. I'll just get this one. And then I'll say, let me go under the frame. I'll say there should be no background because here we would like to have a transparent background, right? like this doesn't have any white background, red background, nothing. It should be transparent. And then for the images, for the images, you would like to open up your simulator and take a screenshot. Then I'll just copy this. Let's say copy to clipboard here. I'll press Ctrl +V. Okay. So, I just pasted that. Now you can get this type of variation. But then you need the second image or even like three different images. Let me just try to kind of like log in because I'm going to get more screenshots here. I'll say continue. And okay, so I just logged in. Let's go under the explore screen and I'm going to take another screenshot. Again, I'll copy this to clipboard. Let's go and maybe create this one initially. So I'm going to paste this in. And what you would like to do is zooming in as much as possible. So you are basically deleting this extra space from the top and from the bottom. So go ahead and zoom in. Don't make it this much, but just make sure that you know you get rid of these extra spaces as much as possible. So I'm going to go ahead zoom in. I think this is fine. And you also want to make sure that under the mockup you say there is no shadow. Okay, because if you have shadow like let me select one of them like I think it is not really that visible but there is some shadow right here and it's not going to make it look like this if you have shadow like just trust me go ahead and he would like to select no shadow and then we can export this. So that's the first variation. Let's go and get one of these. I'll just keep it simple and get the first one. Again, I'm zooming in as much as possible. I'm going to export this as well. And let's go ahead get one of these. Yeah, I think I'll just go with this one. Let me take a screenshot maybe from the messages. I'll copy it to clipboard again. and I'll paste this in. Let's zoom in as much as possible. Okay. So, what we have just done here is something that you can implement in all of your future projects. Just visit this site and do the same thing that I've done. Now, I'm going to get these three images and I'll just paste it into VS Code. Let's actually go under the legal folder. I'm going to drag and drop and let's just say like I'll rename it. I'll say demo one. Um I think this should be demo 3. Sorry, demo two and three. Now I will go into codex. So I had this prompt and I'll just say in landing page use these images which are demo one, two, and three. Okay, so I'll just run this and let's see what we're going to get back. All right, so this took around 17 minutes. GPT not only build it but also test it out on the browser. So here you can tell I have bunch of different files but the important one is the index.html. Just go ahead rightclick and then open this with the live server. If you cannot see this option then just head over to the extensions and just get the live server extension. Let me show you that pretty quickly. It's going to be this one. Install it and then you should be able to see it. So right click, press this and here we go. This is the end result. And I think UI is way better than what I expected. And like we didn't give any kind of reference at all. It has built it by itself. And notice how it is following the system design that we currently have. So it didn't build something like in the red color or purple or really anything. But instead it like it is following the blue color theme that we have in the mobile application. Now if you wanted to you can of course as usual you can follow up and improve the design. I don't want to waste any time but here you can tell we have the terms of services under the terms endpoint or URL I would say. Now here you can tell there are a bunch of different uh placeholder fields. That's because AI cannot really guess what is the legal name of your business, you know, privacy policy URL and things like that because this is still not deployed. So these are some um placeholders that you would like to actually read and fix. But other than these, you don't really need to change anything else. This is exactly what I have done when I was building my own mobile application. And I think like this is the old name. Um sorry, this is the old name. Previously it was called bulky AI but recently I have update the name but it is still under the old domain which is fine. So here I have a terms of services if you if you scroll to the bottom here you can tell like I just put the details about my business you know where I'm from things like that. And now it's time to build the privacy policy. And for this again I have the prompt. You'll just go ahead get this entire thing. Let's paste this in. And now it should also build the privacy policy. Once this is done, I'll just be right back. All right. So after some time, this has also been implemented. Here you can tell in the footer we have this link. Again, there are a bunch of different placeholders that you would like to read and update just before you publish your app to the app store. And then you would like to kind of like deploy this because currently this is running on your local machine. Now I'll show you how to deploy it in a second. But first let's go back to our list. Now we have built the privacy policy and terms of services. On top of this you also want to have a support URL because this is a field that Apple will ask you in the Apple dashboard when you want to deploy it. And this is going to be by the way under the Apple store connect. So we can actually visit that like app store connect. Sorry not Apple store. It should be app store connect. So this is something that I go into in detail in my school community but basically [snorts] in simple terms this is going to be the place where you will publish your app and they ask for a support URL. Now let's go ahead and build it as well. I'll just say also add a support page. Please keep it simple and super quick to build. like I don't want to wait 10 minutes. So I'll just say don't test only build. Now usually I wouldn't say this but this uh this is just because this is a tutorial I'll say don't test it just build so that we don't waste any time. And now while this is building let's go ahead and see cloudflare. This is where we will deploy our application. Sorry. This is where we will deploy our privacy policy and in general the landing page. So this is completely free to get started with. Just go ahead and sign up with your GitHub account. This is what I have done. And you will just go into VS Code under Codex cloud whatever you're using. You will just say go ahead and deploy this to Cloudflare pages. Okay. And looks like support page has been completed. Let me double check. We have the support page here. The only thing that you need to update is the support email, which is something pretty easy to do. If you don't know how to do it, just talk with Codex. It'll um basically it'll walk you through the entire process. Okay. So, with that said, what you would like to do for deployment, just going here and saying something like deploy the legal folder. Right? So, we have the legal folder. I'll just say deploy this to Cloudflare pages. And Cloudflare has a tool called Wrangler, which is a CLI tool that allows you to publish your app without touching the browser. So from the terminal, it can use this tool and deploy your app. So I'll just say use Wrangler and I already have the setup and login. If you don't have, you can say go ahead and set this up for me or just tell me the process how I can set this up. Okay, so I'm going to run this and after I believe couple of minutes, this should be deployed. All right, so it was super quick. Here you can tell it took 1 minute and 20 seconds. And if you press the link here, you can tell our landing page is live. Now we can use this URL in the App Store Connect dashboard. So you can add this link as your privacy policy. This link for the terms of services and then /sup support. Let me just find it. This for the support URL. All right. So this is how you build the legal pages and deploy it to internet. The only thing left for you to do is filling filling in these placeholders. And literally that's it. Now, with that, I think I'm going to leave this lesson right here. Let's go ahead and visit VS Code. And as usual, we're going to stage everything and commit our changes. All right, so this is where we left. Now, in this section, I'd like to talk about something called error tracking and monitoring, which sounds pretty complex, but it's actually pretty easy to implement. And it's really, really important to understand, especially if you're building apps. Um, for us to be able to understand it, first we need to see the problem and then the solution. Then I'll show you how to integrate it. So, let's just see the problem first. Now, let's say you built your own application, right? You deployed to App Store. everything is working in your own device and even in the simulator. But you cannot really just assume that this is going to work for every single one of your users. Now like it or don't like it in real applications, there are always some kind of edge cases and like there will always be some problems that you need to fix. And now you need to be notified anytime your users are getting some errors. Now let's take a look at the diagrams that I have prepared. So here you know like what happens when your users face some errors. Do you think they will send you an email or do you think they will delete the application and leave a one-star review with a really bad comment? Well 99% of the time this is what's going to happen because they don't even know who you are, right? So how would they know your email? So they'll never try to send you an email explaining the issue. they'll just delete the app, leave a one-star review, and they'll say something like, I don't know, like profile screen doesn't work. I'm trying to see my profile image, but it is not even visible. I am deleting this app. Something like that. Right? So, that's the problem that you need to kind of fix. Anytime there is an error, you need to get an email automatically seeing the error, the user, and how to fix it. So, that's the beauty of Sentry. This is where Sentry comes in. We're going to fix it by using Sentry, which is completely free to get started with. So, think of it like the watch tower of your application. Now, it is much more than just error tracking and monitoring, but here are some of the things that I can highlight. So, it's going to catch the errors. It's going to show us the structured logs, which is like console.log, but it is structured. That means you know it is searchable and it is persisted in the cloud. Then there are session replace which means that it's going to take video recording anytime there is an error. So let's say your user presses button and it has failed. So you will have the video recording of that in your sentry dashboard then it helps with performance such as traces and bottlenecks and as I have already mentioned you're going to get realtime alerts. Now, by default, it's going to work with your email, but if you wanted to, you can set this up with Slack, I believe, Discord, and even Microsoft Teams. Okay, so this is completely free to get started with. If you use the link in the description, you're going to get $80 extra free credits, which is pretty generous. So, go ahead and sign up with that link, and then you'll be in the Sentry dashboard. So, initially probably you will not have any projects. So just go ahead and say create a project. From here you can select your repository. Let's say you don't have a repository on GitHub which is completely fine. So this is optional right. Um then you would select your platform. In this case it's going to be react native and then give it a project name like anything codex gram. This is what I'm going to leave. And then we'll say create the project. Now I'm going to select my repository. And as soon as I select it, it is going to automatically detect that it is a React Native project. So here I just search for my repository. I can select it. And now it's going to auto detect that this is a React Native project. I'll leave everything as it is, but I'll update the project name. I'll say Codex Gramm even though you can call it anything really. Then you can also update the alert frequency. I'll just leave everything as default. And here you can tell you can connect it to Slack, Discord, and Microsoft Teams. But for now, we'll just leave it as email, which is pretty comfortable, especially if you're just building it by yourself, like if you don't have a team. Okay. So, with that said, now this is what you're going to get, which is called Sentry Wizard. Now, you can run this automatically, sorry, by default, or you can just copy the instructions and paste it to AI. Now, if you wanted to again, you can just open up a new terminal, copy this entire thing, and run it. But I'll just get the instructions. And I will paste it right here in my Codex session. So, let me go ahead and open up a new chat and maybe I'll try to zoom in. I'll paste this in. It explains everything and it even provides the DSN which is a connection string. Basically, it'll allow us to connect to this specific project. Anytime you create a new project, by the way, you'll get a different DSN. Okay. So, with this, I'll go ahead and run it. This will set up Sentry and then hopefully we should be able to test this out. Now, while this is building it, there are a couple of different features of Sentry that I would recommend you to set up. Like the first one is going to be sentry logs. So, let's just go ahead and say Sentry Logs React Native. I would visit the documentation and then I would just copy the entire page and ask, you know, Codex or Cloud, whatever you're using. I'll just say setup sentry logs for my project and it is actually pretty simple. It is just a one line change and like if you're interested you can pause the video and read this documentation which they explain everything in detail but let me try to pretty quickly go over it. So to be able to understand what sentry logs is here I have prepared this comparison between console.log versus sentry logs. So here as you already know console.log lives on user's device only right so it's going to disappear when the application closes. It is plain text and it has no connection to errors like it is super simple for simple projects for debugging. But on the other side logs are sent to sentry servers which means it is saved on the cloud. It is persisted and searchable. That means you can you can literally query anything and to be able to query them there are some texts. So it is structured and it is linked to the traces errors and replays. Now here is how to use it. Like you can have different logs for debugging purposes you know just for information logs, warnings, errors and even something like fatal which is you know really really important and that is like kind of like a problem that needs to be fixed immediately. So to give you an example database connection failing is something fatal that you need to fix. Okay. So you can just pause the video and read this if you're interested, which I would highly highly recommend. This is one of those things that people don't really care, but as a app owner, I think this is one of the most important topics so that like you can get the email and immediately solve it before your application has really bad reviewing. Okay, so with this, let's take a look at the VS code. I think this is still setting this up. Once it is done, I'll just be right back. All right. So, within the 6 minutes, this has been installed and set it up correctly. Now, one thing that I want to mention is that Sentry is a native module. So, once you install it or once you set this up, you need to rebuild your application. So, as you already know, rebuilding means you need to just say MPX expo run iOS in your terminal, right? So just copy this, kill your application from your terminal which is this one and then rerun it and then your application will be live once again. Now with this I'm going to go ahead and paste this into actually not this one sorry I'm going to get this copy page um for sentry logs and I'll just say go ahead and set up sentry logs. Let's say this is dogs for sentry logs set up for me. All right. So, as you can tell, this has been set it up pretty quickly in less than 1 minute. Now, on top of this, what I have asked is this. I said, go ahead and create me a sentry test page under the settings and create some errors and logs when we press those buttons. So this is going to simulate real world issues so that I can see them in my sentry dashboard and explore. So after two minutes it was able to build this screen called Sentry test. And now we can press these buttons which is going to create bunch of different errors that kind of like simulate a real world implementation right or a real real world use case I would say. Now let's go ahead and run some of them. like anytime you press them, they're going to catch the errors, right? It's going to throw an error and we're going to catch it with this sentry. So here, I'll just press couple of times. And now let's go ahead select our project. In this case, it's going to be this one. And go under the issues. Like here, you can tell 10 seconds ago, we got all these errors. And at the same time you're going to get the email in real time so that you can see what is going on, what is broken and then you can jump into your codebase and fix them. Now if you press any of them you're going to get the whole details about the error about the user like what's the um you know what's the operating system they're using? What is the device that they have? So on and so forth. I'll just leave you to explore it. You can scroll to the bottom and basically check almost every single detail. Then you can go under the explore and take a look at the logs as well. Here you can tell there are bunch of different logs that are generated. And now since in our project we only have one user currently you might not be able to see the importance of logs but just imagine you have like 1,000 users or like even 10,000 users then logs will be really really handy where you can basically debug everything about your project. So overall that's the basics of Sentry. This is how we can set this up. And there's also Sentry tracing. Let's double check. I'll just say Sentry Tracing React Native in the exact same way. You can go ahead and copy this page, paste it into Codex or Cloud, whatever, whatever you are using. And then it's going to set this up. You can read what this is for mostly for performance. And like this is something that I have set it up in my actual application. Okay. So, I'll just leave it as a challenge if you wanted to implement. And with this, I think we can commit our changes and leave this section right here. Well, actually, I just realized there is one more component that I'd like to show you, which is going to be a feedback element. So, let's go ahead and search for Sentry React Native feedback. So, with this component, you can basically you can basically get feedback from your users. So I'm just going to go ahead press this one. So like this is what you will see what your users will get where they can add their full name, email, and you know the feature that they would request. So I'm going to go ahead copy this entire page and I'll just say under the settings screen, add a nice feedback button with sentry. Once this is done, I'll just be right back. So, it took around 2 minutes and here we go. Now, if you press this button, we got the component. Let's go ahead and add a, you know, a suggestion or a feedback. I'll just give it my name. Let's say this is my email. I think I need to copy it like this. Let's just say, "Hey, please fix the profile screen." Now, in your sentry dashboard, if you visit issues and user feedback, you're going to see that we got that feedback, right? So, we have the username, the detail, and if you press that, you'll be able to see everything else. And if you cannot really find it at the time that you're watching this video, you can just go to the search bar and search for the user feedback. Just press it and it's going to take you to this screen. All right. So overall, that's it for the Sentry integration. There is one more thing that I want to do. When we press these buttons, let's actually go ahead and link them to the actual URL. Right? So I'm going to say when we press privacy policy in terms of services link it to the actual deployed let's say URLs. All right. So within the next 1 minute this has been all right. So in 1 minute it's been implemented. Let's go ahead and press this. As you can tell it is taking us to the actual URL. Now, instead of opening opening this up in Safari, I'll just say, can you open this up within the app? Like a sheet would come from the bottom and we would see the website. So, I'll just say So, that was a super simple fix. As you can tell, when you press now, it just opens up within the app. Same for the terms of services. Okay, so I think that's it for the entire project or at least for this section. Let's go ahead and commit everything. I'll stage everything. Let's get a commit message and then we're going to commit this. So this is my commit message. I'll commit and let's say sync this up. All right. So that's pretty much the entire application that we have built. So from here on out, all you need to do is just going and talking with your AI agents so that they can improve the UI design. I'm not going to try to do it even though I have tried to like off camera just make the homepage look a little bit more cleaner. Here's my prompt. But yeah, as I said, at this point you would like to just have a couple of different follow-ups. I don't know, maybe generate more design references and then ask them to kind of like implement it until you like the end result. So, with all that said, I think I'm going to leave this tutorial right here. I hope you enjoyed it and learned something new from it. If so, don't forget to like and subscribe.
Generated algorithmically for Search Engine
Indexing.