Build an AI App Without Coding (Zero to App)

6.91k views4100 WordsCopy TextShare
Riley Brown
We take you through the complete process of building apps using AI in 2024. No coding required - jus...
Video Transcript:
right now people who can't code are using AI tools like these that we're going to talk about today to build apps that make money we do it every day today we are going to be talking about the full app creation process for those who do not know how to code we are just now beginning to have the ability to create apps without having to write a single line of code we can rely on natural language speaking to AI to write all of the code for us today we're going to be talking about our process and
this is going to be an overview of the types of tools that we use and then we are going to dive into what we think this process may look like one year from now because this technology is rapidly increasing in its powers and how integrated it is into your tools quick 30 second recap of what we talked about basically we said look at the niches that you know about that you care about look at competitor data on apps like sensor tower look at Trends on Tik Tok and Instagram then based on that see what you
can do by creating a specific tool that solves the problem for that Niche that you know a lot about using AI yeah and a lot of people are taking a Content first approach so they're deciding what types of tools would go viral and then they're building it for that specific viral use case there's a lot more competition when you do that but it is a really great place to get started and that's what we talked about in last episode so after this episode go ahead and check that out you don't need to watch that video
before this one these I believe are the best tools for beginners to create apps with AI so if this sounds interesting to you let's just dive into the actual process to create apps this tool is for front-end design an do you want to give a quick definition of what even a front end is yeah think about the front end is like everything that you see so all the buttons on a website and uh all the pages on the web at the different screens like all the interaction there any animations or maybe you're moving things around
like an app like Trello or notion right anything like that all happens in the front end one thing that i' had always thought when creating apps or before I had ever created apps I always thought that you needed to create a wireframe or you basically need to plan out every single page of your app and I actually don't do this when I'm building my own web apps I actually go straight into a tool called VZ which actually creates mockup front ends and so let's take a look at this video real quick so this user is
actually uploading a CSV file from where a a leaderboard for maybe a game or their Community or something like that and then the prompt is can you create a black background minimalist dark mode leaderboard component to show the top 10 users with the highest number of messages posted I want hover States on rows thin white borders and special styling for the top three users and v0 is going to look at the input and it's going to generate code and then it's going to render that code directly in the window if you've used claw artifacts it's
very similar to that and if you've used bolt it's similar to that as you can see here it just created that front end when you hover over them it creates hover States I'm assuming that's what it means when you hover uh it changes States when you hover and then it asked for three special it asked for like special formatting for the top three and there you go I think it looks pretty good what do you think yeah that was just one prompt it looks good yeah and you can always do follow-up prompts so if you
were to enter a prompt after this you could literally say can you actually make it bigger or or can you actually make the first place green the second place blue and the third place red and it will add a very high success rate do that task for you and you can iterate on this until you have your concept or it's a draft for your front end that you can then use to put into your back end later and the way that we take our front-end ideas and basically create an app that a user can sign
into that there's a database right every single time you use Twitter and you upload a tweet or you upload an image it has to store that data somewhere that text and that image needs to be stored in some database we can't just have this front end because there's nowhere to store that information and you can't sign in so we created a template in software composers and we're going to continue to make more and more template that allows you to basically create these basic web apps very quickly because because an actually went through and did the
plumbing to start do you want to explain that process a little bit yeah for sure so you know I think one important thing to understand first is we've done the hard work of deciding what tools you should use like VZ is the best tool to make front end components the design is far superior than anything else reason why is cuz VZ has these components that already look really good that the AI already has so it has this catalog of really high quality written code that's what we're doing for you with these templates is we're writing
high quality code that connects the front end and the back end and adds basic features like authentication or storing stuff sing images videos grabbing that data all all all of this stuff that is like high quality code that your AI can then use to actually create the apps often times if you want to get started completely from scratch the AI has a hard time because it doesn't have anything to go off of if you think about how AIS work they're just prediction engines based on the input data if you give it really high quality input
data uh which includes components and the plumbing for apps like connecting a front end and the back end with something like Firebase like allowing people to log in uh like creating these functions and methods to store data to retrieve data to do all these very basic things that you need to do again and again the AI will then be able to do way better job at fulfilling your request your request being like create this app that does XY and Z then we'll know that oh I can use these existing things to log in a user
to store data to create a button Etc and that's that's really the cool part and this is true across the board with AI if you just say I want you to write a script for a marketing video on YouTube it's going to not know at all what direction to write it but if you say I want you to write a marketing script specifically on how to attract users for my IOS app and then you upload maybe a voice message and you're like include this idea this idea and this idea and then make sure that to
have a CTA at the end that gets people to sign up for our newsletter for example it will do a much better job because you're more on the same page whereas if you show up and try to build something from scratch like I did to start it took me like three hours just to get to the point that the template was at and it wasn't even as good so the initial work is done and so now the AI kind of knows what direction like it knows that we're using nextjs in one of the templates and
it knows that we're using Google Firebase and we'll get to all of that in a second so let's go over the process for the template and if you scroll back over the last three months of my videos every single video where I'm coding I'm using the template like straight up there's one video where I'm making an IOS app where I'm using Swift or xcode but other than that every video that I've made I'm using either template number one in the community or template number two and this is the same process for both of these so
the way you get started with the template is of course you come up with your idea which is what we talked about last episode and then you come up with an idea for a design and the design is honestly optional because cursor can also design as well what you're going to first do is you're going to download the template and the link will be down below that's the first step you download the template and this is going to be a repet project or a repple and an do you want to explain the role of repet
in the template repet makes it super easy for us to share these templates with you it's one click for you to get it and it also makes it super easy for you to deploy your project so whenever you're done with it and you want to send it to your friends or send it to your co-workers for them to use you can click a single button DRL it deploy your project to the internet get a link and it makes it super easy so it's this web- based essentially code editor that has a lot of features like
that they also have their own AI features they're pretty decent it's essentially like a big ner friendly way to editing code deploying it and going from zero to a final product it does make it incredibly easy to take whatever app you create and just put it on the internet and then it's super easy to create a custom domain which I've talked about in previous videos and you can find that information in the community as well if you want to dig a little bit deeper into this the first thing that you're going to do once you
download this project is you're going to connect it to Firebase and Firebase allows you to store data and handle user profiles or authentication so basically what it anytime you go to a web app most of the time you see sign in with Google and that's exactly what you can set up right away you can allow all new users to just sign up with Google and because you've set it up with this template after your first prompt the front main page should be sign in with Google and that's without writing a single line of code you
should have the signin page with Google and the third step is connecting it to cursor and so we're actively looking for alternatives to having to set up cursor and repet every single time but right now I still believe it's the easiest way to deploy web apps do you want to explain the relationship between cursor and repet I think you do a better job yeah so cursor is the best AI powered code editor repet is also code editor so technically repet can do everything that cursor can but cursor just does the AI powered features better right
now because they have the composer feature they've built it out a little bit more it has some more features that allow you to make changes more frequently they're more accurate throughout your code base that's the only thing cursor does so that's why for this one particular part we want to of Outsource that work the cursor and that's how we connect those two things and we're also using Claud so for those of you who are beginners we are using Claude but that's built into cursor so once you sign up for cursor you basically have access to
a bunch of different AI models right now Claude is is the best AI model for creating code and we use that within cursor once we're done with our web app we can use repet to deploy it to the internet really quickly so that's why we take this approach when creating web apps I really wanted to show you the power of cursor and where we originally got our name for these software composers this is cursor composer and in the case of the template you would be using repet and on this side panel right here it would
show you your web app but in this case we have it connected to a different app which shows an iPhone simulator because this is our app that we're currently building called Yap thread but we can actually edit the interface of this so here we can just quickly upload that voice note right here we can actually just ask AI with natural language just say what we want to change about this app and so I could say can you please make the text size for each of these in the list of threads bigger include the color of
the tag in each thread in the list of threads so if your tag is a certain color I want that color to be present somewhere in that list afterwards I always use codebase because I'm not technical I do not know how to code and therefore I don't always know what files it needs to look at the more you get better at this you actually will learn what files it needs but you're basically telling cursor what files to look at and every time I'm just like look at the whole code base which is all of the
files and so we can just run this these are all the files that it's looking at right here and it says I'll help you modify the thread list and now it's generating the code and there we go and so whenever it's done we can just press save there you go as you can see here it made the text bigger and instead of listing the the tag name it just now lists the color so this one's in public if we click public it shows only the ones with that color and this was a feature that we
did not have prior now it shows the color let's do a fun one I'm showing you that once you have your project intact it understands where you are in the coding project and so when you ask it to make a change it can make a change which is why we created the template I actually hope we get an error just so we can show that process boom so that actually is an error that we could fix and the way you can fix that is I can just screenshot this part up here and say at the
top here you what you did was you basically replaced the whole row that lists the amount of notes and the date below the title in the thread Details page you basically replaced it with the whole tag editor thing that's present on the thread list page can you please just list the tag TS in line with where it shows the number of notes all right this is in the weeds anyway we're going to run this okay so wait on you actually said that you wanted to release an iPhone template using Swift can you uh talk about
that a little bit Yeah so we built this app out in react native because we wanted it to work on uh web and Android and iOS but most apps I think can get all the way there just by focusing on iOS the iOS store makes way more money than Android and web so if you want to build an app the best way to go is probably iOS and the easiest way to go is probably iOS by using xcode which is this code editor that Apple gives you alongside cursor and we're going to launch a tutorial
on how to do that and that makes building apps super easy I think it's even easier than using graet and cursor together I agree and um your apps look really good and they feel really good because they feel like native iOS apps like someone at Apple made them Swift is very easy to understand in my opinion like as someone who doesn't code like it's pretty easy to understand just the language and by default they look good we're going to make our own podcast episode on that and a tutorial video and that'll be probably sometime in
December or January when you first start and as you'll see in the other tutorial videos that we've done cursor was hooked up to repet in this case it was hooked up to an iPhone simulator but basically you have cursor where you say what changes you want to make to the app cursor makes them and then however you want to view it in the case of the template repet will be open in the side window and it will show you whatever it is that you are working on so I have a question for you an where
do you hope this process goes one year from now yeah honestly this is a lot of Step so I hope it becomes one click that would be a really big benefit when cursor launched for example it was just a chatbot within a code editor you couldn't automatically get your changes onto the code cursor AI wasn't able to change your code or create new files or update files or delete files all it was was able to give you response and you know jiley you know how you coded with Claude like that right you basically just ask
Claud questions if you code you copy paste it it so that was like the first iteration it's already gotten a lot better but still there are so many steps you have to connect Firebase you have to use two different tools i' leave the code is abstracted away from the user but uh there is a interface that the user can see that code in that's not like a programming language but something else uh which they can understand that's logical they can edit it I see the main Improvement in getting started in deployment which has been the
the hardest part of all of this and we're trying to make that easier but yeah in the future I feel like those things can get much better so that was just a really quick example of us using cursor the same way that you would use cursor and replate with one of the templates that you will see in the description of this video we talked about our workflow and how to build an app but if you want to understand it on a macro perspective let's zoom out now and look at what we talked about so we
told you that what tools to use Firebase repet and cursor these are the tools that we're telling you are the best for their job as well as v0 I need to put v0 in there somewhere which is for making the UI those are the best tools for the job storing data AI features authentication reading data all of that is the plumbing that we've done for you with our templates that is working with these tools and making it so that it's very easy for the AI in you to build apps together and now your job is
really simple all you have to do is do the UI and do the business logic so the UI is like figuring out how does your app look and feel how does it work you can use tools like Vu to help you with that and the business logic is like what does your app do when you add data like let's say you add you know a to-do item in a to-do list like what does it do everything at the end of the day in app development is just about different ways to look at things different ways
to send data edit data and modify data and we've done all the plumbing to get that to flow easily and for AI to understand what's the most efficient path we've told you what the best tools are so you don't need to spend hours and hours researching is Firebase better than super base should use re acne or Swift you use cursor or Bol we're telling you these are the best we use all of them we use them every day Riley showed you how to use cursor just now and now the ball is in your court can
you figure out the UI and business Logic for your Niche for your audience for your job and make a tool that can make you money that's really the question it's easy to uh get lost in all of this stuff another way that you could say business logic is like problem solving like does your app sufficiently solve a problem and I found that if you're deep in a Content creation Niche if you're deep in finance right if you're actually good at other skills that's when it becomes really easy to come up with a really good idea
for an app because you're like oh my God like I every single time I take notes in one app but then I write in a different app and then I film on another app right how could you actually combine those tools into one to actually make your workflow significantly easier to make it easier to communicate with your team and like delegate or like divide tasks whatever it is that you're in and whatever work that you're doing whether you're in school or in a job focus on the problems that you run into and you will come
up with ideas for an app that can make hundreds of thousands of dollars the question is whether you can execute on that and you actually have the marketing abilities and the ability to communicate th those problems so that you can sell it and over the next few day uh weeks I'm going to be doing more tutorials along with the podcast going over how to use the template to create apps and I'm also going to talk about how to think about problems and like how to solve specific problems using this template once you do it a
few times it becomes second nature and it becomes super easy and then you're going to start building tools for yourself you're not going to think about oh I need to go on the internet and look up uh a tool that does this specific thing you're going to be able to just make it for yourself with the template and that's actually been like the most rewarding and fun thing for me with these templates is I'm using software that I've built and that is really fun and you can build it specifically for you personalized and then if
enough people find it interesting and you share it with your friends on social media and enough people are like I want to give you money for that then open it up to the public and so yeah this was an overview of our process that we currently use as software composers and as the technology gets better so will our templates because we are following how to build with AI very closely and that is the point of this podcast how can we help you build with AI I'm Ry Brown I'm M there we'll see you guys later
Copyright © 2024. Made with ♥ in London by YTScribe.com