Figma To App Store In 37 Minutes With AI [Tutorial]

Right now, everyone's talking about building AI web apps, but I think the real opportunity may be on the app store. Why? Well, I still think it's

store. Why? Well, I still think it's quite hard to build iOS apps with AI, and there really aren't any great vibe coding tools for it yet. But maybe

that's where the upside is. So, today I invited my buddy Ros over. He's a

product engineer who's built and shipped over 20 iOS apps. Now he's going crazy building even more iOS apps with AI. And

he's one of the most knowledgeable people I've met in the space. So I

wanted to see how fast you could go from scratch to a real iOS app with just AI coding tools and have you guys watch the entire process right here. Because when

it comes to iOS, you need to have good mobile design principles. You need to understand mobile user behaviors and the whole system architecture on iOS is just way different than web apps. So, can you

build and launch an iOS app quickly with today's AI coding tools? Well, that's

what we're about to find out. Ross, you

think you can do it?

>> I don't know, but we'll try.

>> All right, let's go. First, we got to come up with an idea. So, what were you thinking?

>> Yeah, so I was thinking just cuz we only have 30 minutes, we should do something that's a starter project, maybe with one function. Actually, last week I saw a

function. Actually, last week I saw a app on Tik Tok that blew up. It was

called like how we feel. It was a mood tracker and it let you pick from a bunch of different moods which ones you you were feeling right now and then a little journal at the end and then it just saved it and so you could look back at

your your past week of emotions and how you were feeling on different days.

>> Okay, I like that idea. Why go with something so simple?

>> Yeah, so we want to go simple because when it comes to your first build, you really don't want to go past one feature because that adds complexity. It adds

time. The longer that you take to develop a feature, the more time you're spending away from your actual users who can give you the feedback you need for that next iteration, that next feature.

So, if we start with just one feature, we're going to get it out in time and we're going to be able to get valuable feedback for you. So, the first thing I want to do is take a look at the app that I saw last time on TikTok and also a couple other mood tracker apps and

just show you exactly what we're building out here. So, I'm just going to go to the app store, type in mood tracker, and right away you'll see some very similar patterns on. So, this is actually the app that I saw, and it's

super simple. You just type it. You just

super simple. You just type it. You just

tap whichever emotion you're feeling, and then it stores it in a in a list, and then it has a couple other views so you can see your emotions in other ways, and then some resources to help with your emotions.

>> And this is a pretty successful app.

>> This is a very successful app. It it

like you can see has 4.9, 23,000 ratings. It's in the top 100 for health

ratings. It's in the top 100 for health and fitness. And I I remember when this

and fitness. And I I remember when this I even saw a couple Tik Toks of this a couple months ago um because Apple uh gave them editor's choice. So So Apple really respects this app as well.

>> Cool.

>> Yeah. So I'm going to actually take some screenshots right now because I want to I want to have some inspiration when I when I start designing our mood tracker app. So I do like these pages on this

app. So I do like these pages on this one. I'm going to look at a couple other

one. I'm going to look at a couple other other apps, too. I do like this as well.

Little a couple other apps. I think this is a great place to just do some competitor research as well. I like the colors on on the Dio journal in this little month view. And then this this

view is so simple. I I think another reason like people don't state their emotions. They don't know what they're

emotions. They don't know what they're feeling. So, if we can get them in on

feeling. So, if we can get them in on like some really simple I feel good, bad. I think that's a great starting

bad. I think that's a great starting point. And then everything else seems

point. And then everything else seems pretty similar. All these features like

pretty similar. All these features like the the chart and everything, these are really cool features, but I don't think it would benefit me or any potential user in the future for me to build this out yet. All right, cool. So, I think

out yet. All right, cool. So, I think these are good and I'm just going to airdrop these to my computer and then we'll open up Figma. So, before we get into coding and any of the development

process, I really believe in designing things before you develop them because it ensures that you know exactly what you're going to develop. It ensures that you can see the whole story before you

develop. And I I just know so many times

develop. And I I just know so many times when people start vibe coding, they have an idea and they start vibe coding, wait, I like this feature, I like this one. But if you have in your mind

one. But if you have in your mind already, no, this is the this is the set features I have. This is what we're going to do. Then it it makes the development process super easy. And

also, you can get some feedback on your designs before you start developing, which again, a lot of this comes down to validating what you're working on. it

it's important to get validation as soon as possible and Figma is a great place to quickly send ideas to other people, show them and and where I can build out the full app.

>> Yeah. Yeah. So, let me walk you through my whole process. Right now, I've aird dropped the the screenshots to my my computer. And now we're going to get

computer. And now we're going to get started on basically setting up the wireframes. So the reason I have all

wireframes. So the reason I have all these screenshots here and the reason I I get inspiration, it's really difficult for any designer to come up with designs from the scratch. If you ask any

designer what they do, they usually go on to behance or some other inspiration website and start looking at other resources from the same market. The

reason you do this is I know that we're building a simple app as a mood tracker.

Imagine that we were making something that was uh more complicated, didn't have competitors in the same way as a new idea. You still have a similar

new idea. You still have a similar market to maybe maybe there's a journal app that that that's out there. So all

these inspirations kind of get you in the mindset of existing users and what they're feeling. I think a lot of mobile

they're feeling. I think a lot of mobile user behavior is understanding what they've already been used to and just mimicking that same experience but better. So, we want to keep this app

better. So, we want to keep this app really just one function. And looking at here, you can see that I really enjoy this this main emotion grab, but I also really like how you can have sub

emotions that you can pick from, too.

So, I was thinking the app could be very simple. It starts with this screen or

simple. It starts with this screen or something similar to this where you just grab your main emotion and then it asks you to grab a secondary emotion from that. And then I was also thinking it

that. And then I was also thinking it would be cool if you can add a little note of why you're feeling that way. And

that's the whole app. So, we can get started now by adding our base wireframes of what I think a almost every mobile app has. So, let me place some wireframes down. Uh, every every

mobile app that you start with has a welcoming screen that that feels like, hey, welcome to my store. Like, thank

you for coming. Um, we're going to get you set up, right? And then they have an onboarding screen. The reason for an

onboarding screen. The reason for an onboarding screen is you don't want to throw people right into the experience, but at the same time, you don't want them to not know what they're getting themselves into. So, this is a great

themselves into. So, this is a great place for you to storytell like and also sell your app a little. Imagine that you have a storefront and you sell shoes and people are looking at the shoes, but you don't say anything to them at all and

then they just walk away. This is a chance for you to be like, "Hey, these are the best shoes in the world. These

are the shoes that like are like you want to try them on? We can try them on right now." And go walk around the mall.

right now." And go walk around the mall.

go walk around and and try these shoes on. Tell me how they feel and then if

on. Tell me how they feel and then if you like them, they're only $50, right?

So, you're this is the time for you to sell it to to really show that you are the app. And so, we're going to have an

the app. And so, we're going to have an onboarding experience. And then in the

onboarding experience. And then in the actual app experience, we're going to have your your home screen that people are going to be used to. And I think for the mood tracker, it's going to be this screen right here where you just have

like a list of your past entries. And

then also what I want is them to be able to tap into one of these entries and then see I want to show them the sub emotions they had and also the if they added a journal like a text journal. The

final screen that I want to show is the detail screen. And the detail screen is

detail screen. And the detail screen is one that we just we pressed one of these journal entries in the past and it'll show you that you said I'm feeling grateful but there was other emotions

like at ease and thoughtfulness. Um and

then if you added a note it'll show that as well. And then also I was thinking

as well. And then also I was thinking maybe a way to delete past entries and and that would be the whole app. And I'm

thinking because the app is so simple that our onboarding could actually be just their first mood tracker entry.

I've laid out my basic wireframe of of what I think the app should be. And now

we're going to start adding some elements in. I'm going to design the

elements in. I'm going to design the first two screens right here and then speedrun the rest of them. So welcome

screen does not need to be complicated.

I think uh one thing right here, I do like the background of of the the dark mode. So, I'm going to I'm actually

mode. So, I'm going to I'm actually going to move these all to dark mode.

And then I think a welcome screen should just say the the the title of the app and then and a logo for it. Maybe we can generate one real quick with the chat.

So, I'll just say daily mood tracker.

Very creative title. And then we'll add a button right here that says get started. And I do like the green from

started. And I do like the green from the dio. So, I'm just going to grab that

the dio. So, I'm just going to grab that green and then small.

>> That's a nice little button.

>> There you go. We got a little button here. And then I will add a very simple

here. And then I will add a very simple gradient little logo. Maybe like a sunset to show like daily.

>> Nice. That looks good.

>> Cool. So, we got the welcome screen.

Really simple. Maybe we can even add like some kind of subtext here. Track

and understand your emotions quickly.

What I like about this is that it's someone watching this might think is like this is so simple, but actually that makes the app better, right? If

it's just really simple.

>> Yeah. Think about the fact that they've already downloaded the app onto your phone. They have some awareness of what

phone. They have some awareness of what your app is.

>> Therefore, you don't need to impress them in that way. It's better to get them to understand what the function of the app is and the value of it.

>> Yep.

>> All right. So, this this first screen is going to actually be them selecting their the emotions they're feeling. So,

I'm going to add this how are you? Maybe

I'll I'll actually add the logo at the top as like a small little thing and then something like how are you and then maybe something like choose one

emotion. Now, we have to figure out what

emotion. Now, we have to figure out what emotions exist in the world and and the these sub emotions. So, I'm going to ask Chad GBT to give me a list of like eight

major emotions and then a list of sub emotions for each one.

And then because I grabbed eight major emotions, I was thinking right here we have a grid of like a a 4x two grid where you can select which emotion and maybe there's like an emoji that

represents each emotion. So I'm actually going to pull out a grid layout here.

Each one of these is going to be one of the major emotions. Maybe we'll do like an emoji and then the title of the emotion right below. So I think the first one was happiness.

Cool. So, we have the the grid here now with all eight of the emotions.

And then I'm going to add a the same button from the past page over. And this

one's going to say choose one with like and it's kind of slightly tinted out. So, you can't go forward until you choose one.

>> Nice. That looks cool.

So these are the the two onboarding screens that I made so far. And in the nature of time, I've finished up the rest of the screens. So you can see that here with the sub emotion screen. So if

if someone chose anger right here, they would see these options right here. And

then once they select multiple of these, they can press continue and then they get to this journal entry style screen where they can enter a journal. And then

finally, they get to their home screen, which they can see multiple of these. I

can add another one so you can see what that would look like. But after the first one, I kind of wanted this message right here so they know what they could do the next time of your moods will show up on your homepage here. Click below to add a new mood. Yeah. So, this is what I

expect the full app to be.

>> And that's interesting. I mean, we're still in Figma right now, but we kind of already know what the app is going to look like. I kind of like that process,

look like. I kind of like that process, but maybe you can explain why. Why do

you do it this way?

>> Right. If you don't do this process, you can even do this on a pen and paper, right? Draw it out. If you don't have

right? Draw it out. If you don't have this process written or or designed out, you're going to enter the code editor not fully understanding exactly where this button goes or where this button

goes. And so you're going to be

goes. And so you're going to be prompting the AI, oh actually I want them I want the button here. I I want this here or we're actually missing this button. What this also lets me do is if

button. What this also lets me do is if I'm missing anything, let's say on this on this screen right here, right? I

didn't know to to add this text right here. It would have been like it would

here. It would have been like it would have been like this and then I would have developed this in cursor and then I would have opened the app and went wait a second this feels empty. I think this needs something on Figma in less than a minute I was aware that I needed to add

this in and so now I'm way more confident that this is what the home screen is going to look like.

>> Yeah. Yeah. I mean I I really like that process. I think a lot of people jump in

process. I think a lot of people jump in too quickly into just starting to build and just starting to code when although this may feel like an annoying extra step, you're actually saving time,

right? If you're watching this, you may

right? If you're watching this, you may know that Ross is actually running a starter story build boot camp where he teaches this entire Figma to Cursor to Windsurf. In the starter story build

Windsurf. In the starter story build boot camp, we have a little bit more time to go over the entire process. But

that's one of the reasons why I wanted to come on do this video, but also do the boot camp is that I think this is a really awesome process that will save you time and I never really seen it on YouTube before or anything like that.

>> Yeah. No, the boot camp's been awesome.

I think all the students have loved the course. It's if you've never built an

course. It's if you've never built an app before, it's really beginner friendly, but at the same time, it gets you to a full app that you can put on Test Flight and get feedback from people. People have been loving the

people. People have been loving the Figma part because it's again, it's easy uh and it it allows people to see their whole app and ideate everything. We've

been getting incredible app ideas. One

of those apps I saw just just last week blow up. And all it does is it organizes

blow up. And all it does is it organizes your Tik Tok and Instagram real likes so that they're all in one place. And then

if you have any cooking recipes on it.

And just in last week's boot camp course, one of our users was like, I want to make a app that makes it really easy to store your recipes from from your Tik Tok likes and then uh generate actual recipes from them and everything.

So, it just shows you that you're going to be able to get a really good app idea and then potentially get something like 2.8 million views >> and 10,000 downloads right away. And I

think Tik Tok is a great place to exactly see the market, see the community, and what they need, what problems they're having. And in the boot camp, we have two days that you go through Tik Tok and understand what

problems are going on and how to create a mobile app that solves those problems. >> And there you have it. Now you're seeing very, very successful apps on the app store that do that same thing. So the

proof is in the pudding there. Okay.

Well, let's get back. Now that we have our design, what's next?

>> Yeah. So now that we have the designs, we can go into our code editor. We're

going to be using Windsurf. And

basically get started on setting up the initial project. and then I'll show you

initial project. and then I'll show you how easy it is to take each page from here and then build it up. Let's do it.

Yeah. So, we're going to be using Expo for this project. If you've ever if you've been building web apps, you know about React and Nex.js. You can consider Expo the Nex.js of mobile development.

And we're going to start by just creating a very simple starter project with it, which is going to give us our baseline files. And then from that,

baseline files. And then from that, we'll be able to turn it into our actual app. So, we're here in Windsurf. I'm a

app. So, we're here in Windsurf. I'm a

fan of trying out all different developer tools because sometimes like I love cursor and cursor is the most popular ID, but I've noticed that with cursor after a certain point it gets

really messy and the hallucinations get more frequent and I noticed on windsurf it could be slow to start but then it does a better job later on in line. So

try out all the different code editors.

I heard Amazon made one too recently so I got to try that one out as well. So,

we're going to go into the terminal here and and create that first project. And

we'll call this daily mood tracker.

Cool. So, we have the initial project running. Now, I'm going to I'm going to

running. Now, I'm going to I'm going to show you what the iOS simulator is. It's

a cool little thing from Apple that lets you run your mobile app development on your computer. So, you're able to see

your computer. So, you're able to see exactly how it's going to be on an iPhone without having to actually run it on your phone. So now I got the Expo server running and let me show you what

the iOS simulator looks like with the Hello World project from Expo. Simple

project with two tabs. Now we're going to take our Figma screenshots. So we're

going to tell WinSurf at a high level exactly what our app is. And then I noticed that if you try to send multiple pages at once to Windsurf or any code editor, it does a bad job at redesigning

it. So I'm going to do one page at a

it. So I'm going to do one page at a time. It shouldn't take too long. So I

time. It shouldn't take too long. So I

want to tell the AI all the highle information first. I'm going to take a

information first. I'm going to take a screenshot of everything. I'm going to have it talk to me about what it needs from me so that it could build out everything properly. So I'm going add

everything properly. So I'm going add the screenshot here and I'm going to say I am building a mood tracker app called daily mood tracker.

The app is very simple and has one function. Track major emotion,

function. Track major emotion, track sub emotions and any additional note.

The user will have a homepage where they can see the previous mood entries and also a way to enter

them and see a detailed mood entry page.

So, you're not necessarily saying, "Go build this right now." You're just saying, "Hey, this is what we're doing, buddy."

buddy." >> Yeah. Yeah. Exactly. I just want to warm

>> Yeah. Yeah. Exactly. I just want to warm it up. I wanted to understand what I'm

it up. I wanted to understand what I'm doing. If I if I said go do it now, uh

doing. If I if I said go do it now, uh there's a million ways it could have gone and then we're spending the next couple hours just telling it, "No, undo that. Undo that. This is what we want."

that. Undo that. This is what we want."

That it's better to to get it to slowly understand with you. So, I'm going to straight up say, "Ask me any questions before we start with the welcome page."

And with Windsurf, they actually have a write mode and a chat mode. So, I'm on chat mode so that it ensures that it doesn't start messing with my code. And

it any time it wants to mess with my code in chat mode, it's going to have a proposal for me. So, I can confirm or not. So, it's asking me if I want to

not. So, it's asking me if I want to rebuild the app from scratch using the existing UI uh with with exact UI specifications. And then yeah, so most

specifications. And then yeah, so most of these things are are going to be solved from each every time. It's

basically asking me if I'm going to tell it what it wants it to design. And the

answer is yes. Because it is now aware of all of the pages, I feel a bit more comfortable now starting with the welcome page. So we can actually just

welcome page. So we can actually just move into the right mode. And in Figma, all I'm going to do is select the the frame for this and just command shift C copies it. One thing that the AI still

copies it. One thing that the AI still doesn't do a good job at is if I send this image to and ask it to design it.

Now, it doesn't have good awareness of where the elements are in the position of the the screen. It might shoot the get started button all the way up here because we don't tell it to. So, I'm

going to say this is the welcome screen.

Please generate it. Now, the top part has the text and logo. On the bottom part of the screen, you have a subtext.

You can read the subtext. So, say you have a subtext and a continue button.

The other thing that Windsurf has, it has this planner mode and I I I like to keep it on when I am when I'm doing bigger tasks like this >> because it remembers that okay, we're just working on a welcome page right

now. I understand it also has the memory

now. I understand it also has the memory of this like okay these are the other pages but but he is right now working on the welcome page. So that's where it's going to focus on the the plan always updates in like a little markdown file

over here. So it's a great place. Yeah.

over here. So it's a great place. Yeah.

If if it's really good because if if your AI starts hallucinating on you and you're getting the repeated mistakes again and again, just check your plan and make sure that it's not saying something that you don't want to. Or you

can just say like really focus on the welcome screen because you keep generating the other screens.

>> So, it's still working here.

>> Mhm.

>> Nice.

>> And then we're on Cloud Sonic 4. I

really do think you should use the best model possible. Lower the model is, the

model possible. Lower the model is, the more likely it's going to fail on you and then you're going to have to figure out what to do. And the smarter the model is, the the easier it is to fix bugs and different things. Absolutely.

>> So, it wants to install Excel integrate, which is fine. You can install that.

Okay. So, now it's asking us to restart the server, but it's already on. So, I

can just check.

>> Oh, >> and like that. Got a nice gradient.

>> It got a nice gradient. It got the title. It has everything. I don't like

title. It has everything. I don't like this bottom tab bar, so I'll ask it to remove it. But this is a great I mean,

remove it. But this is a great I mean, from the original one to this, >> it's pretty close.

>> Yeah. Not bad.

>> That's really impressive. And so that's really an app that's kind of sort of running.

>> Yeah, >> this is your app right here. It's it's

already sort of locked.

>> We're actually on an an iOS simulation.

So any bug that happens on this is going to be the same type of bug that would happen on your phone. So this is the best way to debug if you don't have your phone on you. You could also run app

development directly on your phone, but I I like to keep it on the screen. It's

easy to move back and forth. I don't

have to move my eyes different places.

But yeah, it's great.

>> Cool. So, what's next?

>> So, I'm going to I'm going to get it to remove this tab bar because we're not going to need it for our app. And then

the same process we're going to do for each page.

>> Cool.

>> Oh, this is the other thing. Um,

Windsurf now has a mic button so you can just talk. So,

just talk. So, >> I use that all the time.

>> Yeah. So, now we're going to build the second screen. On the second page, right

second screen. On the second page, right after the welcome screen, when they press get started or continue, it will take them to the what we're going to call onboarding, but it's the first time they enter their mood tracking. On the

first page of the mood tracking entry, they're going to see the logo and a smaller form of the gradient and then a title that says, "How are you?" and then

choose one emotion. Then we have all the emotions in a 4x two grid. We have four at the top, four on the bottom, happy, sadness fear anger surprise disgust

trust, anticipation with a emoji with them. And then at the bottom, we have a

them. And then at the bottom, we have a choose one that's disabled. And then

once they press it, it should enable the button allowing them to continue to the next page. So just like that, we can

next page. So just like that, we can >> And now you can go even faster with the voice recording.

>> Oh yeah, so fast. All right, so the second page, it looks like the second page is completed. So now we can check uh with the simulator. So we're on the welcome screen. If I press get started,

welcome screen. If I press get started, it should take us to the the first major emotion selection.

>> And it removed your little thing.

>> Yeah, it removed the tab bar. So now it looks super clean.

>> Wo. Great.

>> Nice.

>> That looks really good.

>> This is the solid. It got the logo nice up there, too.

>> Yeah.

>> And if we So, we're not able to press choose one down here, right?

>> Or the button right here. And it says to choose one.

>> And then let's just choose fear. And

then the button worked.

>> Perfect. Just like that.

>> All right. So, all we got to do now is the rest of these pages and we'll have an app just I think in less than 10 minutes. Yeah. I hope. So, I'm going to

minutes. Yeah. I hope. So, I'm going to now implement the rest of these changes.

is I'm going to fast forward a bit and then we'll get to the final full flow.

And then finally, when they press on one of the cards in the home screen, they're going to be sent to the detailed screen of that mood entry, which should show

the sub emotions as well and the journal note that they've stored if they have one. It should have a trash icon on the

one. It should have a trash icon on the top right, which deletes the entry from their local storage, and then a back to home button. Okay, so I think we finally

home button. Okay, so I think we finally got the last page. Uh, wind surf right here has said the the mood tracker is complete and ready to help users. So now

we can go to the simulator and see if the full flow is actually working. Get

started. Choose one emotion. Do

anticipation cuz I'm anticipating something really awesome.

>> Wow. Uh,

>> this is amazing.

>> Yeah. Oh, cool. Okay, so we get to choose which ones. Uh, do multiple to test that multiple works with interest, eagerness curiosity.

Continue. Oh, this is so clean. And then

a final message here will say my first entry.

>> This is like a full-blown app. This

can't believe you did this this fast.

>> Hit continue. And then we're on our home screen.

>> Wow.

>> Yeah. So then you can see right here.

Click into this. Get the detail page of it. You can see the other ones I clicked

it. You can see the other ones I clicked on. And then my first entry.

on. And then my first entry.

>> Wow.

>> And then um I should be able to delete it right here. Cool. And then I could do a new one like that.

>> Oh my gosh. It's perfect. No bugs. No

bugs at all. Wow. Amazing. Uh, let me actually not do any message on this one.

I want to see if it still works. Yep.

Still goes through. Perfect.

>> Wow.

>> And then if we refresh the page right now, it should take us back to the home screen.

>> Oh, there's the first bug.

>> You don't want to go back to the onboarding.

>> No, no, no. So, this is the welcome screen. This should only happen the

screen. This should only happen the first time that the user opens the app.

Once they've done it once, they don't need to see this again, this get started button. So,

button. So, >> uh, this isn't right. It should have taken me to this uh this home screen right here.

>> Okay.

>> Okay. So, we're going to go into Windsurf right now. And this is what is so awesome about uh prompting is that I think a lot of people get stuck right now and not know what to do next, but

this is a great time to just quickly be like, I like to compliment my AI.

Everything looks great. and then say, but when I restart the app or after the first entry, it takes me back to welcome, which

should only happen if there's no entries right now.

>> Okay. Yeah. So, if there's no entries right now, I should see the welcome screen. And then once I have my first

screen. And then once I have my first entry in, it should just take me to the home screen every time I restart the app.

>> Got it. And this is kind of the process for fixing bugs. And you're going to run the bugs. You're going to run lots lots

the bugs. You're going to run lots lots of bugs, right?

>> Yeah. And and this one is, you know, this one is like we knew exactly what it was. It could be like, I'm not sure why

was. It could be like, I'm not sure why you took me back to the the welcome screen when I've already entered a journal, right? And then it'll pick up

journal, right? And then it'll pick up the clues and and kind of work with you.

>> But you can't just go into it and say, "There's a bug."

>> Yeah.

>> If you just say there's a bug, there's an error, the AI has no idea what you're talking about, give it something. Give

it even just a single sentence of what you think is happening can lead it in the right direction.

>> Yeah.

>> All right. So now it I'm on my home screen. So if I restart Yeah. Boom.

screen. So if I restart Yeah. Boom.

>> There we go. Four app is done.

>> All right, >> that's it.

>> Great job. Wow. That's amazing. Like,

that's just too cool that you did that.

And we haven't been here. We've been

recording for less than an hour pretty much by this point. And uh this is a legit app. I don't want to say it's, you

legit app. I don't want to say it's, you know, has feature parody over the one we just looked at, but you did this part with Billart in less than 20 minutes.

>> Yeah. Yeah. It's kind of mind-blowing, right? I I worked in production code

right? I I worked in production code just just four years ago. Making

something like this would have actually taken us a whole month with like a four person team. Okay, what's next? Now Expo

person team. Okay, what's next? Now Expo

is going to take our project and compile it into a build, an iOS build, which then we'll be able to submit to Testlight.

>> What's TestFllight?

>> So Testlight is a great and easy way for you to get your apps running in the App Store and onto your phone. This is also where you're going to set up external testing groups where you can send to

friends, you can send to your private beta group and start getting feedback.

>> Cool. So, it's really a way to get right now you're running it in a simulator.

>> Yeah.

>> I want to get it onto a real phone cuz that's what I want you to do today is get it onto a real phone so we can show the audience that this is a real app that you can send to friends. Super

cool.

>> Yeah. So, it's super simple. We're just

going to run two commands and then we're going to be ready to go. So, first

things first, we have to send this over to Expose server. So, Exo is aware of, okay, this is a new build, new project that we want to get started. So, I'm

going to run the command EAS submit. So,

it's saying here that the project has not been configured yet. So, we're going to start that. So, we'll just say yes.

And then we're just going to focus on iOS right now. Oh, okay. We have to build the EAS file. So, we'll just tell uh Windinsurf, please build our deployment EAS file.

>> You don't have to necessarily know how to do that. You just ask Windinsurf on how to >> Yeah, 100%. If there's any anytime you see the red here, you could just highlight the text here and then send the chat. And I would treat Windsurf

the chat. And I would treat Windsurf less as a thing that does things that you tell it to do and more of like a cooperative partner.

>> Yeah. That you work with. Cool. So it

created the file. So now we can run this.

>> And so you just gone through it's asking you a bunch of questions or just making you agree to a bunch of things right now.

>> Yeah. So this is what makes Expo so amazing. Normally I would have to go to

amazing. Normally I would have to go to the app store connect and go through like 10 different forms right now and put all these things together. Expo is

doing all that for me. I just have to answer a couple questions. So this is Zapto connect where you add your apps and you maintain all of them. here. You

actually have to submit it through the app store and there's a whole process of of the app store reviewing it and making sure that there's like user permissions

and product IDs specific for this app.

So, what we're going to do right now is create a new app for this project and the bundle because Expo is already connected to everything. I don't have to create a new bundle ID. Like I said, it it's already should be here. So, you can

see right here, Rash Clarity Mood Tracker.

>> It already did it.

>> It already did it. So, it's already a step ahead of you. Say daily mood tracker. There's already an app called

tracker. There's already an app called Daily Mood Tracker. So, we'll call we'll call this DMT. Uh, maybe not DM.

>> That's probably an app for that.

>> DMT emotion tracker. Now, we're in our app project for the emotion tracker. And

we can see that we shouldn't have any builds yet. Yeah. So, we're still

builds yet. Yeah. So, we're still deploying that build right now. So,

nothing's going to be here. But we can actually check the status of that build on the XO website. So, go here. Just

refresh the page. Daily mood tracker.

Oh, nothing is built yet. Let's see

what's going on. Still compressing the files. Mhm. All right. So, it looks like

files. Mhm. All right. So, it looks like our build has finished. It has run through all the different parts. It took

about 6 minutes and 47 seconds to finish. H. You're not going to get more

finish. H. You're not going to get more than 10 minutes on on a even a complex build. So, it doesn't take too long.

build. So, it doesn't take too long.

Now, we're going to run EAS submit. And

this is going to take that build and now send it to the app store.

Cool. So now it's showing the build and it's ready to submit. So we can go into the internal testing here and add the build. Oh, it's already on actually.

build. Oh, it's already on actually.

>> Nice.

>> So I should get an email right now.

Cool.

>> Nice.

>> So I just got this email. So I can just go now. I can view it in my test flight

go now. I can view it in my test flight app. And there it is. DMT tracker.

app. And there it is. DMT tracker.

>> Moment of truth. There we go.

>> Yes. Show that to the camera.

>> There you go.

>> That's a real on a real phone.

>> Let's go.

>> Nice.

That's beautiful.

>> This feeling is so good. It's It's the best feeling every time.

>> Yeah.

>> Yeah.

>> Wow. And it seems to just work. I'm sure

you will sometimes run into bugs once you get into test flight.

>> There we go.

>> Wow.

>> Full app. Let's go.

>> That's great. I can't believe we did that in a in less than an hour.

>> Yeah.

>> Congrats, man. Cool. All right.

That's it. Okay. So, we have our app.

It's done. You showed it to everyone watching right now. So to answer the question, can you build iOS apps with just vi coding AI tools? And can you do

it in 30 minutes as we tried to get done? Well, we didn't do it in exactly

done? Well, we didn't do it in exactly 30 minutes, but it was pretty damn close right?

>> Yeah. I would say the the reasons why we didn't get done in 30 minutes were more like out of our control kind of technical issues that happened, but I I really do think you can get these apps out quickly.

>> Yeah. I mean, I think what you showed today, which is really cool. I mean, my favorite part is your sort of design process, which may seem like overkill or, you know, I want to just jump into the code right away, but actually I

think we clearly we proved it. We saved

a lot of time by just sort of planning out and doing basic designs. Like you

said, you could potentially even draw it on a napkin.

>> Yeah, >> that was cool. I also love that you showed wind surf and I think that kind of methodology where you went instead of just saying, "Hey, go do this," you went through each screen. And what's even

cooler is like we actually got a real app on the iPhone. And that's what I really wanted to show today is like it's cool to have a web app or a prototype or whatever, but this is something that you

can actually send to friends, family, get feedback, and we did it all in about an hour, which is super cool. So my

question to you, Roz, is yeah, we built this, this is cool, but what's next?

>> Yeah. So I was thinking about this, like how can we actually start making some money? Because I'm sure some of you will

money? Because I'm sure some of you will probably wonder like, well, this is a very simple app. There's no way no one's going to pay for it. There's no way to even charge anyone on this. And I was thinking like, this is where you want to look at your competitors. You want to

see what everyone else is doing, where they're at. And and I was pondering like

they're at. And and I was pondering like with with LLMs and AI, what would be really cool is I think a next feature or or a way that we can charge for this, we can add an LLM that looks back at your

previous week or month of emotions and and moods and journals and then generates a report on how you've been, what the emotions that come up, why they're happening, what's the triggers, and then help them, you know, maybe the

next month they have less of those because of that.

>> Yeah. So, lots of new features. And I

think what's cool is when you build a simple feature, you get lots of ideas for more features, but you don't have to build them yet until you get feedback from other people, right? What about the marketing side of things? I know we can

build this, we can send it to our friends, but how do we get like users and people to pay for this?

>> Yeah. So, I think as you get feedback, you're going to want to get more people to try it even and tell you that feedback. And I think the best place to

feedback. And I think the best place to do that is in your marketing approach.

So, with mobile apps, you'll notice that some of the biggest apps have used Tik Tok to grow. I would go on Tik Tok. I

would search up the current existing popular mood tracker apps and see if they have any viral videos. If they have any viral videos, look at that first sentence, that that hook sentence. Maybe

it's like, "Stop this if you have a hard time expressing your emotions." And then you'll show a demo of the video. And so

this could be like a 20 to 30 second clip, just that first hook and then a explanation of how your app works and then you can put a link on your Tik Tok bio and then you can direct them to that

link so that they could download the app and try it out themselves. And Testy has this cool and nifty feature when you screenshot you can actually write a feedback message and it sends directly

to my Testy project settings. So I can see from there everyone's feedback and you can see from my other apps that I've been using this tool actually. It's

really helpful way to to do so.

Actually, let me show you right here.

>> So, basically tell your friends and family, hey, if you see something weird, take a screenshot, put a note in there, and I'll see it.

>> Yeah. So, you see test flight and then screenshots. Feedback screenshots. And

screenshots. Feedback screenshots. And

you can see here that people are are they've given feedback and then from this uh like someone sent me another app that they like and they they gave me some feedback on what I should do.

incredible helpful like advice and this is exactly how I made my next update.

>> Yeah. Yeah.

>> The last question that I have is in terms of what's next. I know we have it as test flight but test flight isn't app store yet. What is the process? We don't

store yet. What is the process? We don't

have to go too deep into it but what's the process of how to actually get this onto the app store so that millions of people can download it.

>> Yeah. So I think the most suffering part of this experience is the app store review. So, every time that you want to

review. So, every time that you want to upload your your app to the app store or update the app, it has to go through this review process. And what that's like is you have to make sure that all

these different aspects of the app are correct. Your titling, your screenshots,

correct. Your titling, your screenshots, and then when you submit the app, it takes up to 24 hours for someone to pick it up and review it. And then another 24 hours for them to say yes or no to it.

And if they say no to it, it's because somewhere in the Apple guidelines, you messed up in some way. Or honestly,

sometimes I I've been in experience where I didn't mess up and they just told me that there was something wrong with my app and then I just replied back like, "That's not true. Try again." And

they're like, "Oh yeah, it wasn't true."

And they they confirmed it. So the app store review is honestly like the the worst part. So expect it to take the

worst part. So expect it to take the longest honestly out of everything. But

the test flight review process isn't the same. So you'll be able to get it on to

same. So you'll be able to get it on to test fight right away. The the issue is that the app store review team like you might have someone from some other country that's reviewing it uh at like the middle of the night and then you

have someone local reviewing in the daytime and they might have completely different sets of beliefs on how the guidelines work and so there's a lot of inconsistencies with it too. So just

expect the worst and try to be as nice and and buttery with with them. It helps

a lot.

>> Yeah. Seems like getting rejected from the app store is like a right of path.

Yes, very much so. When building out all >> Absolutely.

>> Yeah.

>> Yeah. So, I mean that's a great segue into the starter story build boot camp that Ross is leading where he actually talks about how to find an idea, some cool TikTok stuff in there, how to design it with Figma, how to build it

with cursor and potentially wind surf.

And also, we have office hours with Ross himself where you can ask him questions and get help.

>> Yeah. I mean, it's just really cool that we're we're getting people to come in and within the first 2 days you get your idea ready. On top of that, you're going

idea ready. On top of that, you're going to come out with a mobile app idea that's built on good principles. It has

consumer behavior tactics in it. And

then by day nine, you have a full app on your phone and able to send it to people and you'll be ready for that next step that you take on your journey with with this. Cool. Well, I'll put a link in the

this. Cool. Well, I'll put a link in the description to Ross's boot camp on a starter story build. Otherwise, thank

you. Thank you. Great job and so cool to see you build that. I'm excited to see you guys' feedback in the comments and hear about what you are building on iOS.

All right, see you guys later. We'll see

you in the next one. Peace.