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 video analysis...