How To Build An App With AI (no experience required)
17:13

How To Build An App With AI (no experience required)

Alex Finn 23.08.2024 245 725 просмотров 6 257 лайков обн. 18.02.2026
Поделиться Telegram VK Бот
Транскрипт Скачать .md
Анализ с AI
Описание видео
Building a SaaS with ChatGPT is so easy even a complete beginner can do it. In this video I walk step by step through how ANYONE can use any free AI tool to build an app that they can then productize and sell online. For free. No experience required. Join the Vibe Coding Academy: https://vibecodingacademy.dev/ Follow my X: https://x.com/AlexFinn Sign up for my free newsletter: https://www.alexfinn.ai Tools you can use: Grok- https://x.com/grok ChatGPT- https://chatgpt.com/ Claude- https://claude.ai/ For coding: Replit- replit.com Prompts I use: "Hi Grok, I'm a brand new programmer, and I'd like to make a Todo list app using React. I've never programmed a line of code in my life before so if you please can help me out here, but also teach me step by step what you're doing so I can then build other applications myself. I'm doing this completely on Replit. Please make this app simple so that I can then customize it any way I want." "Start with app.js please explain line by line how this works so I can truly understand the code I'm writing here. My goal is to become proficient in React so I can build other applications"

Оглавление (4 сегментов)

  1. 0:00 Segment 1 (00:00 - 05:00) 1000 сл.
  2. 5:00 Segment 2 (05:00 - 10:00) 936 сл.
  3. 10:00 Segment 3 (10:00 - 15:00) 855 сл.
  4. 15:00 Segment 4 (15:00 - 17:00) 417 сл.
0:00

Segment 1 (00:00 - 05:00)

in this video I'm going to teach you how to build your first application just with AI no programming experience necessary it doesn't matter if you've never wrote a line of code in your life by the end of this video if you stick all the way through you'll have your first app and on top of that you'll be able to program more apps by yourself no help required let's get into it boom I'm over here now let's get right into it what I'm going to show you how to do today is build a Todo app through JavaScript no coding experience necessary really easy to do and all you'll be doing is using AI the AI is going to teach you how to write the code it's going to teach you what the code means and it's going to give you the skills you need to then go and build other applications yourself again beginners can do this no coding experience necessary and this will put you on a path where you can start building your own applications that you can then turn around and sell or have others use so what we're looking at here is on the left is a site called repet and on the right is AI I'm using grock 2. 0 but you can use whatever you want if you want to use chat GPT or Claude you can do that any of them work uh I just like to use grock it's the newest model grock 2. 0 at the moment this video came out so on the left hand side is repet what repet is a place where you can put code and run it completely free on the internet uh it's the best beginner friendly way to write and run code I like to use it completely free easy to use so what you're going to do right now first is sign up for repet pause the video link down below completely free create your account come back and we'll start building code okay welcome back here we are let's do it so now that we're in repet we're going to create a rep down here it's going to be in react JavaScript uh react JavaScript is a programming language that a lot of big companies use today it's one of the fastest ways to build and deploy applications if you learn these skills here you can very quickly turn around and build a lot of other different applications let's give it a name we'll name it AI to do app and we will create it now our environment is set up on the left side to put in code we get some basic code set up for us here uh and then what we can do is if we go to console we can then click run and what's going to happen is it will run the code for us and so what you can see here is your basic boilerplate react JavaScript code all set up for you as you edit code over here on the left you'll get the results in real time on the right this could be a little intimidating don't be intimidated we're right at the beginning what we're going to do now is switch over to the AI over here and we're going to start using it to teach us how to code build this app and get some really cool results really quick so I'm in grock again you can use anything you want if you want to use chat GPT if you want to use Claude it's all up to you they'll all be doing the same thing I'm just using grock for this and what we're going to do is we're going to say hi grock I always say hi to my AI as I'm building things out you got to have your manners manag one day they'll be more powerful than us and can kill us so you got to make sure you say hello and thank you and all that hi grock uh I'm a brand new programmer and I'd like to make and by the way this prompt will be down below in the description uh if I'm you I would actually type this out yourself not just copy and paste it uh a big thing here is you know you I want you to also learn how to prompt with me and use Ai and get better results so if you manually type this in yourself you're going to learn prompting skills while you're doing this too so follow along with me while I do this and then you can pause and prompt yourself and change the prompt if you want but here we go hi grock I'm a brand new programmer and I'd like to make a Todo list app using react I've never programmed a line of code in my life before so if you please can help me out here but also teach me step by step what you're doing so I can then build other applications myself please make this app simple so that I can then customize it any way I want so what we did here is we set the state with the AI on what we're trying to do what our background experience is It's always important when you're prompting AI especially if you're going to be building applications uh letting them know what the situation is what your skill levels are and not just to build it right if they're just building it you're not learning anything here so what I'm doing is I'm explaining what my skill level is and what I'd like roock to do which is teach me along the way so that I not only just spit out a bunch of code that I don't know what is doing but also I learn what it's doing so I can customize and build myself
5:00

Segment 2 (05:00 - 10:00)

uh and build my skills as well and real quick let's also make sure that we let grock know we're using repet so the AI know about all the websites and how they work it's pretty amazing how they work actually so let's go in here and also make sure they know that I'm doing this completely Onre awesome now we can run it so what we'll get here is we'll get a guide from grock on how to build this application from repet step by step right so it's going to tell us exactly what we need to do uh we can skip most of this cuz I got this most of this set up for you already but let's go into the basic structure so it's going to teach you about the basic structure of a react application again react is a really awesome framework for JavaScript basically makes it very easy to quickly spit out applications ship them launch them and get people using your apps it's going to tell you about the code structure over here on the left the different files what they each do I definitely recommend taking the time to go through this and learn about what each one of these do um but what we're going to do here is we're going to go into the main part of the application uh which is app. jsx this is the code you see here so if I come into app here and I say uh subscribe to Alex Finn and then I save it what you can see is Boom immediately updates uh what you see on the application in the web view so pretty PR cool so this app. jsx this is going to be your main file where you're going to do all the code editing as explained by grock here um so what I'm going to do is copy over this code I'm going to drop it in here so you can get a taste of what the kind of basic app code does spit out from grock so this is the basic to-do list and we can do to-do item one and add it and so what you can see is all the items you add your to-do list go under here so this isn't obviously good enough this gives us an application but we don't know how the hell this works or what the hell it's doing since we're beginner programmers we really want to understand line by line what's going on here so what we're going to do is we're going to go down here it's going to give us some basic styling it's going to tell us the exact app file to put that in and put that in here update it o looks makes it look a little prettier and then now what it's going to do is start explaining so let's do this let's say start with app. js please explain line by line how this works so I can truly understand the code I'm writing here my goal is to become proficient in react so I can build other applications and so what we're doing here is we're now having a conversation with the AI uh to learn what it is it's having us do so we can learn how the code works so that after this we can a customize this Todo list to our liking and then B build other applications maybe applications we build ship and start selling and making money off of so let's hit enter on this and now it's going to break down app. js which is our main file here which is building the main portion of the code it's going to go line by line and tell us uh how it's working so as it generates the code here what you can see is first it starts at the Imports so up here at the top it explains what these import statements mean uh it means it's importing a lot of the react technology that's basically saying this application is built in react so it knows what type of programming language you're using and then goes in and tells you line by line what it's building out what different functions are how State management works event handlers and this all sounds very complex I know as you're doing this but what I really want you to be able to do is a not only understand how you can use AI to build applications but B start to get a grip on how the code works and understand the powers you have and how you can start building applications even with no coding experience before so what I want you to do now is quickly go through here there's going to be a lot of very complex stuff if you try to understand it all at once you're going to become very intimidated uh and it's going to be hard to learn all this but what I want you to do is go through this find one or two things you want to learn about right so maybe we go in here and we ask grock can you explain event handling to me as if this is my first JavaScript application right so we're picking different things out we want to learn about you know I really recommend choosing one or two things at a time again if you try to learn everything at once this can get really complicated really quick choose one or two things read about what that concept
10:00

Segment 3 (10:00 - 15:00)

means and the more applications you build the more you can pick out different things to learn and get better at coding but let's do this let's go back in and let's start customizing our to-do list application here so we have our application here maybe we want to start actually numbering each item in the to-do list as we put it out so right now it says to-do item one so maybe we want to get groceries got to learn how to spell groceries there and we need to buy I paper tells and go to the gym so maybe we want to start customizing this and getting them numbered so let's say grock please make it so that each item in the Todo list automatically gets numbered in ascending order okay so basically what we're doing now is we're using grock as a pair programmer we're finding different things we want to edit in the application we're telling grock what it is we want to do and then grock is giving us the new code to automatically number each to-do item in ascending order in your react to-do list we'll apply the following code okay so it gives us the code we can take this copy it over I have it copied over already and now let's test it out uh get groceries add and as you can see automatically numbered uh Play video games when in Madden online as you can see everything is numbered we asked the AI to edit the code for us add new functionality it spit out the code and then on top of that it then goes and tells us exactly what it did so it goes inside the map function and for every item in the to-do list it pluses one right and so now you can go in not only has it changed the code for us but now it explains the code change isn't made this is really awesome right this is the power of AI this is what AI unlocks is the fact that anyone with zero programming experience can go in and not only build out fully functional applications like you see here but now they can come in and also learn the coding along the way so they can come back make any applications they want why is this so economically powerful because now anyone who has an idea can go and create that idea and make it a reality very fast and then start making money off of it before AI if you had ideas you had to go hire a programmer which could take months and then work with the program you might not even get the application you want but because of AI you can now by yourself go from idea to reality in under 15 minutes right it's unbelievably powerful what you have here if you're not taking advantage of this you're really going to fall behind the people who come up with ideas and are able to create them and sell them are going to make a lot of money this AI Revolution let's do some other tinkerings here let's try some other things out some other stylings and show you some other ways you can use AI to build applications uh let's also do this let's add a new field for each to-do item that lets me rank the priority so now I'll be able to go in and give each to-do list item a ranking of difficulty so I know how to PR prioritize each one so now I can come in I can take this code add it to the sections it has me doing here and I have the brand new application I can keep going back and forth right with the app uh and adding new features new functionality any ideas I come up with I can do it here's another powerful thing you can even do and I love doing this when I'm building applications with AI is you could actually ask the AI for advice so maybe have an application like the to-do list here but you're not sure how to improve it you don't have other ideas you can bounce ideas off the AI to come up with new things to add so let's do that hey grock what other features and functionality would you add to this app to make it more useful and now what you can see here is grock actually gave us recommendations on how we can improve the application through categories due dates sorting and filtering notifications and reminder editing this is pretty incredible not only is the AI our programmer it's also our product manager our marketer it's taking on all these different roles for us right it's giving us recommendations on how to improve the product so you can come in here it's basically like your free business partner where you give it ideas it helps you build the improve the ideas it'll help you ship the ideas to help you make money off the ideas this is the power of
15:00

Segment 4 (15:00 - 17:00)

AI that not many people are taking advantage of most people are just going in Ai and trying to make it say silly things right if you're not using AI to ideate build and ship products you're losing that on potential millions of dollars right A lot of people are using AI coming up with ideas and then shipping those ideas and making a lot of money off of it and it's really easy to do I did this all in what the span of 15 minutes it was super easy now I can go okay let's do this uh let's add edit functionality okay let's implement the editing functionality and now grock will give me all the code and ideas necessary I need to do that right now it's generating the code I can implement it and keep iterating on this application it's pretty amazing it's pretty powerful and you're able to do this really with zero programming experience required you're able to build an app improve it and then now as next steps I can go and say okay help me out and ship this application right and then it'll tell us how to put it on the internet and get other users in it and then I can say okay give me a marketing plan for this application right every step of the way AI will be helping you out so really powerful stuff two important things here is one use AI to help you build the products but equally is important make sure you understand what you're building ask the AI to walk you through the code line by line of what's going on so you're not only building the application but you're also learning how it works so that next time you do this you can be a little better a little bit faster and understand what's going on a little bit more if you found this helpful make sure to like subscribe turn on notifications as well I'm going to be building a ton of these videos I'm going to be showing you how to build many different applications if you never used AI before if you've never built applications before keep it tuned to this Channel I want to make it super easy to use Ai and build really incredible things and make it so anyone can do it no experience required this was a lot of fun I hope you had fun too see you in the next video

Ещё от Alex Finn

Ctrl+V

Экстракт Знаний в Telegram

Транскрипты, идеи, методички — всё самое полезное из лучших YouTube-каналов.

Подписаться