Build Mobile Apps with Replit in Minutes!

Transcript

How everybody, Julien here. I've always wanted to build an iOS app, but honestly, I never got anywhere. Well, that's not the case anymore. Thanks to a new feature launch by Replit, we can now easily build iOS apps with just simple prompts. So in this video, I'm going to walk you through building a Tudu list app with just simple prompts, adding feature step by steps, testing in the browser along the way. Are you ready for this? If you'd like to learn more about this new feature, of course there's lots of information on the Replic website and as usual I'll include all the links in the video description. So there's this nice page giving you the high level overview and showing you some sample apps that have been built, etc etc. And of course there's documentation and they actually have a nice little tutorial which may be an excellent next step. If you want to start experimenting. So before we dive into building the app, maybe just a few words about the underlying technology here. So the apps are built with a frameworkal Expo, which some of you may be familiar with. And in a nutshell, it's a cross-platform framework to build React Native apps. And of course, feel free to go to the So website to get full information and full documentation. Okay, so that's what we're going to build. So let's just get started right now. We can start, of course, from the Replit tool and we get the familiar window with the prompt. Just don't forget here to say, hey, I don't want to build a web app. I want to be a mobile developer. Yes, exactly. Give this a shot. So let me fetch my first prompt and we'll be on our way. So here it is. Very simple prompt. Build a mobile app to manage my personal to-do list. It should look sleek and modern with a palette of blue colors. Feel free to tweak. Features create a task, title, description, due date, priority, be able to mark a task complete with a checkbox. View the list of active. Completed tasks and of course store all information locally to persist tasks across sessions okay so that's the first iteration of my app so why don't we go and start it okay and we'll see on the left side of course replet getting to work and within a few minutes we should have a first version of the app okay so within a minute we see It has generated the design guidelines. It has set up the Expo dev environment, and now it's starting to think about the app and the structure, right? And we can see all the details here. And that's useful information because, you know, if there's anything you don't like here, you could say, well, wait, you know, you made this decision, do this instead. So very useful to see what is actually going on here. We see some images, check marks. We see the blue palette instruction. Apparently works. And now, well, it is writing code. So let's give it another minute. And we should see our app. All right. So Reply worked for four or five minutes. Our app, right? And we can see the preview here. If you want to see the code, well, of course, you can easily do that. I would recommend setting up your Git provider and pushing the code to a Git repo and being able to see what's going on in there, right? Okay, but back to the app. So this is it. It's called Taskflow. We forgot to give our app a name. Should have thought about that. Okay, so let's explore the app. We have an active tab. Of course, we haven't added anything in there. A complete tab and a profile tab. Okay, that's a good start. So why don't we add something here? Let's say become a mobile developer. Okay, save. Let's add another one. Finish my YouTube video on Replet. Okay, description, don't be late. High priority, save. Okay, oh, we see colors as well, and that's nice. Okay, so I'm not done with the video, but let's say I'm, okay, let's just close this. It moves to the completed tab, which is nice, and I guess I can delete it. Oh, yeah, that worked. Okay, so that's a good first version. Now let's try and make it a little better. Okay, let's prompt again. So first maybe rename the app to Taskmaster and add a swipe left mechanism. To mark a task complete. Okay, let's give that a shot. All right, that was super fast under a minute. And while we see the app has been renamed, and now if we try and swipe, okay, done. And it moved to complete it. That's pretty cool. Let's try that again. Buy some red description. All right. Save. Okay. All right. Nice. And yeah, the name is fine. Okay. And yeah, this costs 59 cents, which is pretty good, right? 53 seconds, 59 cents. I can go for that. Okay, let's do one more. How about trying this? When we create a task, we want to add or remove custom labels. Okay, and well, this is a bit of a fuzzy description here. Let's see how Replit figures it out. Okay, that took about a minute. So we have labels. We can select, create, remove, view. Okay, let's try this. So task one, home, why not? Save. Let's try another one. Task 2, personal, save. Okay, so now let's just say, I want to remove this and say work instead. Yeah, that works. Okay, that's pretty cool. Okay, how about custom labels? They should work. Let's create a label called custom. Sign it. Save. Yeah, perfect. Exactly what I wanted. Okay, well, this is pretty nice. We could keep playing with this for a long time and keep adding features. But as you can see, you know, it took me, since I began this, it took me in probably under 10 minutes. And I have an app. And I can test it and iterate very quickly. So what's next? So of course we could add more features and please go and try that. But the next step of course would be to test this app on the phone. And this is super simple. Expo has a mobile app called Expo Go. So all you have to do is just flash the QR code here and it will automatically load your app on the phone. And you can just reload it. Iterate very quickly on it and see what the app looks like on your phone so I don't know if you're going to see much but let me quickly show you what that looks like on my phone okay so can probably see much but hey this is this is the app as you can see right that's the home screen and that's the that's the profile screen right so this is as easy as this just flash the code test on your mobile and then when you're really done and you want to publish it you can publish to the app store so for the iOS App Store, of course, you need a developer account and you need to connect that. And then you can go and publish directly from here and then go through the usual iOS app workflow. So that's really what I wanted to show you today. So I don't know if I'm a mobile developer yet, but I guess I'm on my way. And this really makes it possible for folks like me who've never even considered trying writing a proper app with Objective C or Swift or anything like that because that was way too complicated for me to now just prompt and get something done in minutes and actually test it on the phone and potentially push it to push it to the store. So this is really cool. This is more than cool. This is actually amazing for me to be able to do that. So that's what I wanted to show you today. I hope you enjoyed it. And until next time, my friends, you know what to do. Keep rocking.