LongCut logo

AI Built My iPhone App in Minutes (Full Tutorial)

By Mikey No Code

Summary

## Key takeaways - **AI builds iPhone app in under an hour**: It's possible to build a fully functional iPhone app and have it running on your phone in under 60 minutes without writing any code, by leveraging AI tools. [00:04], [00:48] - **AI tool recreates $4M/month app**: The AI tool used in this tutorial was able to recreate a popular document scanner app, which generates over $4 million monthly from the App Store. [00:22], [01:15] - **Realistic expectations for app building**: Building apps and making money online is not easy, and success depends on execution, timing, and luck, not just the AI tools used. [02:30], [02:48] - **Iterative AI prompting for bug fixes**: Developing the app involved multiple prompts to the AI tool to fix bugs, such as the scanning functionality not working initially and the export button being non-functional. [03:31], [04:35] - **Advanced features developed with AI**: The AI tool was used to add advanced features like text formatting, PDF/PNG/JPEG export, a history tab, and even a signature feature within the document editor. [04:11], [06:45] - **Backend integration with Superbase**: Superbase was integrated to power the login functionality, including setting up database tables for document storage and user creation, and connecting it to the app via environment variables. [07:10], [08:38]

Topics Covered

  • AI builds complex apps without code in minutes.
  • AI app success needs more than just tools.
  • Iterative prompting refines AI-built app features.
  • AI simplifies backend and UI integration for apps.
  • AI streamlines App Store submission and launch.

Full Transcript

What if I told you that you could build

a fully functional iPhone app and have

it running on your phone in under 60

minutes without writing a single line of

code? Well, that's exactly what I'm

about to show you in this video. I'm

going to walk you through the complete

process of how I use just one AI tool to

recreate this popular document scanner

app that's making over $4 million every

single month from the app store. Now,

most people think that you need years of

coding experience, expensive development

tools, or a computer science degree to

build apps. But here's what the tech

industry does not want you to know. AI

has completely changed the game. So, in

the next 15 minutes, I'm going to show

you exactly the AI tool that I used. I'm

going to walk you through every single

step of the building process. And by the

end of this video, you'll have a working

app installed on your actual iPhone or

Android device. And the best part, this

isn't some basic calculator app. No,

we're building a complex document

scanner with multiple features that

could actually compete in the App Store.

Now, I've tested dozens of AI coding

tools, and this one is hands down the

most powerful one that I've found. It

literally built the entire app for me

while I just gave it simple smart

prompts. So, in this tutorial, I'll show

you first the exact AI tool that makes

all of this possible. Second, how to

prompt it correctly to build complex

features. And third, how to get your

finished app actually running on your

phone in under a minute. We're starting

with the base functionality of the app.

We're going to ask RORG to create the

most basic functionality first, a simple

document scanner app that can detect

text from images. Whether users upload a

photo or take one using their device,

the app should be able to pull out the

text automatically using ROR's own AI

API. Here, I'm going to drop in. Hi

there. Let's create a document scanner

app. Let's build the initial

functionality first. Please create a

simple text app that can scan the text

from the photos uploaded or taken.

Please use your own AI API for the text

detection feature. Once this is done, we

can build other features. Rooric will

get to work and successfully it'll build

our base. The app now has the core

functionality ready. It's a clean

working scanner that detects text from

images. This will be the starting point

for everything else we're going to add

later on. Important disclaimer, building

apps and making money online, it isn't

easy, despite what other YouTubers are

saying. So, when I show you how to build

an app, I'm demonstrating the technical

process and the potential. I'm not

guaranteeing your results. These AI

tools are legit and the techniques do

work, but success depends on your

execution, your timing, and honestly,

some luck. Most apps don't make money

immediately and many don't make money at

all. So, I'm not promising that you'll

get rich or that you quit your job. This

is not financial advice or a get-rich

quick scheme. I'm just showing you

what's possible with these tools. What

you do with that knowledge is entirely

up to you. All right, so with all of our

expectations set, let's go ahead and

keep building this app. Now that the

foundation is in place, it's time to

test it. But right away, we do run into

an issue. The scan document button

doesn't do anything. We'll try uploading

a photo, but as you can see, nothing

happens. There's no texts, no error

message, just silence. So, let's send

Ror another prompt to take a look.

Please check the scanning functionality.

The scanning doesn't seem to work. No

results are showing after upload. So,

after a bit of processing, Roar comes

back to me with a fix. And this time,

when we do upload a photo, everything

runs smoothly. The image loads, the scan

kicks in, and the app finally pulls out

the text just like it's supposed to.

these scatters up and running. But right

now, all it does is just show the text.

That's not quite enough. If we do want

this to be a practical tool, our user

should be able to tweak the text and

then save it in the format that they

need, whether it's for notes, for

documents, or for images. So, here I'm

going to tell Ror, "Great. Now, please

add the option to format the acquired

text and export it as a PDF, a PNG, or a

JPEG." ROR will add the features as

requested. We can see the editing tools

in place and there's a new export button

for saving the file. Now, everything

looks good except for one thing. As you

can see, the export function doesn't

actually work yet. Clicking on it

doesn't trigger anything. So, again,

we've got one more bug to tackle. Okay,

so everything's coming together, but

there's still one issue holding us back.

The export button doesn't actually do

anything. The formatting tools are in

place. The scan text is editable, but

when we try to export, nothing does get

downloaded. So again, we'll just go back

to ROR and say, "Great. So the options

work, but the export options don't seem

to do anything. Please make it so that

whenever I export something, it

automatically gets downloaded to my

device." So Ror will run that prompt.

And this part takes us a few tries. Now

there are some error message along the

way and we have to just send a few more

prompts to get it just right but

eventually the export functionality does

kick in. So now whenever we hit export

the file automatically downloads to the

device exactly how we wanted it. Okay so

the export function finally works as

expected. So the next focus now is the

text editor and right now we can bold

italicize and change alignment. But

there is a catch. any change applies to

the entire document, which isn't exactly

ideal if we're aiming for real editing

flexibility. So, let's just tell Ror,

great. Perfect. Now, let's revamp and

improve the editing feature. I want to

be able to properly edit the document

before exporting. We currently can

italicize, bold, set the alignment,

etc., but it affects all the text.

Please update this so that such changes

only affect the specific text that I

highlight. making it closer to proper

word editing software. As expected, this

will take a few retries and a few

reprompts, but it is well worth it

because after some back and forth, ROR

finally delivers a proper text editor.

We can now highlight specific parts of

that text and apply formatting just like

we would in standard word processing

software. All right, at this point, the

core features are in place. Scanning

works, editing is flexible, and

exporting runs smoothly. But the

interface still feels a bit plain, at

least to my eyes. It does the job, but

visually it could use some polishing,

right? So, let's prop to give it a

cleaner, more professional look. Great.

Now, let's improve the UI of the app.

Let's make it look more polished. Also

add a dedicated history tab for all of

the past scans. Now, Roric applies the

changes, and we can see the difference

right away. The layout looks sharper.

The buttons are more refined, and

there's now a dedicated history tab

where users can easily view all of their

past scans. The app finally looks as

good as it performs. And now it's time

to set up the back end. And for this

project, we're going to use Superbase.

This is what we'll use to power the

login functionality. So, let's go ahead

and get it ready before moving on to

authentication. First, head over to

Superbase and create a new project. Give

it a name that makes sense for your app.

And when the password gets generated,

make sure to save it somewhere safe.

We'll need that later on when connecting

everything together. And for now, that's

it. The Superbase project is live and

ready to go. We're not hooking it into

the app. Not just yet, but it's all

prepped. The API keys will come in soon

when we start building the actual login

system. Having Superbase ready is just

the first part. Now we need to define

what kind of data it's going to handle.

And that means setting up the actual

database tables for things like document

storage and user login. So let's ask Ror

for the queries we'll need. Here I'm

going to drop in great now please give

me the superbase queries so that I can

create the database. It's for document

storing and the user creation/logging

in. ROR returns everything that we need,

structured queries for both the document

and the user tables. We're going to plug

these into Superbase in the next step to

get our database fully set up. With

everything all lined up, the Superbase

project created and the queries ready,

it's now time to actually wire it into

our app. And this means telling ROR to

install the right package and connect

the back end. So here we're going to

tell Roor to enable Superbase and

install the at@ superbase/supbase-js

library using expo. That's the client

we'll need to start making calls to our

database. ROR will handle the setup and

it installs everything smoothly.

Superbase is now wired into the project

and we're officially ready to build out

the login system and manage user

sessions directly from the app. So up to

this point, we've focused on the backend

setup. Now, it's time to make things

functional for the user. We need a

proper interface where people can sign

up, where they can log in and manage

their sessions within the app. So, we're

going to ask ROR to take care of the UI

side while we handle the authentication

setup in Superbase separately. The goal

here is to build a simple clean login

and signup screens that tie into the

back end. There is going to be a bit of

back and forth during the process, but

eventually everything will click

together. The login and signup pages are

working and session handling is fully in

place. Our users can now create

accounts. They can sign in and stay

logged in without any issues at all. So,

right after setting up the login

screens, we need to make sure the back

end knows where to store everything.

Superbase is ready, but the database

itself is still empty. There are no

tables. There's no structure. So, we

just jump into the SQL editor and then

I'm going to open up a fresh query

window and then paste in the set of

queries ROR gave us earlier. Now, these

take care of everything. One table for

the user accounts and another for the

scanned documents that'll be created

inside the app. A quick run of the query

and just like that, the foundation is

set. Superbase now has a place to store

all the incoming data and the app

finally has somewhere to send it. Now,

there's no point in setting up a

database if the app can't actually reach

it, right? So, this part's all about

wiring that connection in. ROR needs to

know where Superbase lives and how to

talk to it. Now, up in the corner here,

there's an integrations button. We will

click that, then select the environment

variables panel, and then we're going to

paste in the variables from the project

page in the Superbase dashboard. And

that's pretty much it. That's enough.

With those two values in place, the app

and Superbase are officially on speaking

terms. So every scan, every login, it

can all flow through without hitting any

walls. Eventually, this project's going

to live on GitHub and get pulled into

cursor, which means we need to start

thinking ahead. Environment variables

can't just sit in Ror's interface

forever. They need to be part of the

actual file structure or things will

start breaking down the moment we switch

environments. So we need to ask ROI to

generate a nativev file and then drop in

our API keys there. Nothing complicated,

just locking things in properly before

it becomes a headache later on. The file

shows up right at the root of the

project exactly where it should be. From

here on out, we won't run into any

superbase issues when we do move over

the cursor. Everything will stay synced

and smooth. So, right after getting the

environment synced up, we will jump back

into testing and everything almost

works. The login itself goes through

smoothly. But as you can see, instead of

taking us to the home screen, the app

hits us with an unmatched route error.

It's a small thing really, but it breaks

the whole user flow. So, we're going to

tell Ror, okay, great. So now the login

works, but we're now getting an

unmatched route error message. And with

that, Roar gets to work sorting out the

issue for me. And once the update is

done, the routing starts behaving the

way it should. After logging in, the app

now sends us straight to the homepage

without any hiccups. It's clean, it's

simple, and finally working as expected.

All right, so with the routing fixed and

everything finally feeling stable, it's

time to bring the project into Cursor.

But before cursor can access anything,

we do need to make sure that our code is

sitting in a GitHub repo it can pull

from. And that means connecting GitHub

to ROR first. So we're going to head

over to the integrations button in the

top right corner here of ROR. We're

going to click on GitHub and then go

through the quick signin process. Once

the accounts are linked, Ror

automatically sets up a new repository

under our GitHub profile. And that's the

piece that we need. Now cursor will be

able to clone the project directly and

we can start building the next feature

inside its environment. Everything is

synced and the repo is ready. So the

next step happens inside of cursor since

this is where we will be building the

add signature feature. We do need to

make sure that the entire project is

cloned cleanly into the workspace before

making any changes. So inside cursor

we're going to type clone this GitHub

repo and that's it. The command runs

without a hitch. cursor pulls in the

full code base from GitHub, giving me

the exact setup we originally had in

ROR. Now, the file structure stays

intact. The environment, those match up,

and we're looking at the same project

just in a new workspace ready for

feature development. So, getting the

project cloned is only half the setup

because this is where we start building

the new features. And the goal here is

simple. We want our users to be able to

add a signature directly while editing

their scanned documents. So, we'll go

inside cursor and we're going to prompt,

great, please add a dedicated button

when editing the documents. Create an

add signature feature when editing. Now,

what follows next is a whole lot of back

and forth. Herser doesn't quite get it

right on the first try or the second.

There are bugs. There are weird UI

placements and a few misfires before

things do finally come together because

eventually the signature button lands

exactly where it should and the feature

starts working inside of the editor. But

getting there did definitely take some

effort. But as you can see, it is well

worth it. After wrapping up the

signature feature bugs and all, the core

functionality is finally in place. And

with the app now doing pretty much

everything it is supposed to, it's time

to shift gears and start preparing for

launch. And that means getting it ready

for the App Store. Now, to enable App

Store submissions, we're going to start

by heading to the account settings and

navigate to the features section right

here. And from here, we're going to

enable the option for new App Store

submission. Next, we're going to click

the publishing button in the top right

corner, and we're going to select

publish to App Store version 2.0. Now,

this opens up the submission flow where

we need to enter our Apple developer

credentials. Then, we're going to switch

over to our Expo account to generate a

new token. Now, I'm going to give the

token a name. I'm going to copy the key

and return to the publishing menu in

ROR. Now, once in here, we're now going

to paste in the Expo token. We're going

to fill out the required details and

then hit submit to send the app off for

full review. All right, so now it's time

to log into the app using the

credentials that we set up earlier

during development. And since everything

hooked up to Superbase, the app checks

those details right away. And as long as

everything matches together, we're in.

Once we're logged in, we land on a

really clean home screen with a smooth

iOS inspired design. Here at the top,

there's the app title, and down at the

bottom, we've got the main navigation

tabs, main, home, and profile. On the

page itself, we have two options, camera

and gallery. One lets us take a new

photo. The other lets us upload one from

our device. And in the bottom right

here, you can also see there's a quick

scan button for when we want to jump

straight into scanning without any extra

steps. Let's try out the scanning

features by tapping on the camera

option. Now, the app first asks for

camera permissions, which we allow. And

right after that, it launches us

straight into the camera view so we can

snap a photo of the document that we

want to scan. After taking the photo, we

get the option to crop it, which is

super useful when we only need a

specific part or section of a file. And

once we're happy with the crop, ROG

kicks in and starts processing the scan.

A few seconds later, the text is

extracted and we're taken to the main

editing screen. In here, we can see the

title, the extracted content, and a set

of customization tools. So, we're going

to fill in the title, tweak the

alignment just a little bit, and hit

save. And once saved, a set of new

actions appear. Edit, share, export, and

delete, giving us full control over the

document. From there, we're going to tap

on edit to explore one more feature,

which is adding a signature. The editor

now includes a signature tool, so we can

place a custom signature directly into

the document. After that, we're going to

hit export. And the app gives us three

file format options: PDF, PNG, and JPEG.

Quick, clean, and ready to go. Heading

back to the home screen, we can now see

a whole list of our recent scans

displayed right away. There's also a

dedicated button that lets us view the

full scan history, making it easy to

keep track of everything that we've

saved so far. And finally, we tap over

to the profile tab. This is where the

personal settings live, like we can edit

our account details. We can toggle dark

mode. We can change the password. Of

course, we can access support if we need

help or simply log out. And just like

that, we've got a fully functional

document scanner app. And it's complete

with scanning, editing, signing,

exporting, and user account controls all

running smoothly from start to finish.

And that wraps up the full build from

creating the document scanner and adding

login functionality and all the way to

integrating Superbase syncing with

cursor and building out the signature

feature too. Now, if you're planning to

build something similar or maybe you

want to push a side project forward

without getting stuck in the tech, this

is the exact workflow that I would

recommend to you. So, let me know what

feature you want to add next in the

comments. And please don't forget to

subscribe if you want more build

tutorials like this one. It really does

help me out. I'll see you with the next

one.

Loading...

Loading video analysis...