Coding a FULL App with AI (You Won't Believe This)

I made a really useful app that helps YouTubers respond to their comments using the power of AI. I did it in three days Now the app is called Comment Genie. You can sign up for beta testing and it's free while it's in beta.

So go ahead and click the link down below to test it out. But how did I make the app? You're going to get the whole process in this video and providing you can jam back and forth with an AI in English, then you can develop apps right now.

So let me show you that process. And first of all, I'm pulling out my smartphone because I've got the ChatGPT app on here. Oh.

Hey there. I'm building an app to help YouTubers respond to their comments using AI. Will you listen to everything I tell you from my mind about that app?

Please? Absolutely. I'm all ears.

so the app will have a very simple Google login. And then when you get to the dashboard, you will essentially have your ten most recent comments. Got it.

Your app will have a straightforward Google login on the dashboard. Users will see their ten most recent comments, Just before I start building, could you give me a little bit of encouragement? Maybe speak to me in a French accent, a very strong French accent, using the English language and inserting a few crazy sound effects just to get me up and ready to build this app.

Please. My friend, you are about to embark on a magnifique journey with every line of code. You are constructing a bridge to a world where YouTubers can relax and.

Let your app do some magic. So allons-y lets the code flow like a fine wine and create something truly marvelous. Voila!

Okay. Brainstorming with AI. Using voice mode is pretty cool to start with, but let me show you some more techniques to get the best possible plan of action before you start coding with the help of AI.

So here I am in ChatGPT and I've got the transcript of the conversation I just had here. The prompt I'm going to give is summarize the app and give me a roadmap named file, which essentially is a roadmap file in markdown to simply lay out how I'm going to build the app. Okay.

This has given me a brilliant roadmap all in markdown, which is great for copying. I'm going to copy that code and start a brand new chat. And this is where it gets interesting, because we switch from GPT 4o to the most advanced reasoning model from OpenAI right now, which is o1-preview.

So with the roadmap pasted in above I've put three dashes to separate that and said please give me the ultimate tech stack to help me build this app. I'll need to know what to use front end back end database and break the process down into simple step by step instructions, building one part of the app at the time using best practices. This is important because then I'll get a template that I can feed to my AI tools to start making the app.

Okay. As you can see here, it's giving me a front end suggestion, backend database. All the tools I might need to get started.

And a step by step development guide. Now that I've got a complete step by step guide to build this app, I signed up for a tool called Replit. What Replit allows me to do is store and edit my code in the cloud, so I can quickly test my app and keep things nice and zippy and fast.

Here you simply create a Repl, which essentially is like creating a virtual computer to store your code. You can choose a template, or for me, I chose the Blank Repl The next thing you'll want to do to get going with the actual coding is download Cursor. It's an excellent app, and I'm going to be using Cursor Composer to make my app and basically build it autonomously using an AI agent.

So download this for free. Now I can go ahead and connect this with my coaster account by typing SSH and then clicking Launch Cursor. Now there is a tutorial on exactly how to launch Replit and cursor, and I'll link it down below and also on the screen, so you can go and check that out for yourself.

It's a little bit beyond the scope of this video, but once you've got it set up, it will take you to your code that's sitting up in the cloud, and you're ready to begin creating an app that lives in the cloud for development purposes. And then can be pushed out and deployed so that users can start accessing that app. Now, the first thing I've done is copied my roadmap that ChatGPT o1 generated.

Created a new file called roadmap. md. And pasted all of that information in so I can give Cursor Composer the context of the app.

I'm trying to build. Okay. The best news is this is all we need to start developing the app.

And if I hit command or control I, I can load up Cursor Composer. And you'll notice, because I've got the file open, it's referencing my roadmap, which is great. So I can do the first prompt.

And I've found in my experience it's better to prompt step by step rather than just simply say, make an app for YouTubers to respond to their comments using the YouTube API. Way too much information and you won't get a very good design. So start by building step by step using this roadmap or your own logical brain.

So I know, for instance, the first thing I need to do is build a login page. Okay, so I've said build a login page for this app using a basic design and login with Google button. The app is called Comment Genie.

You get Cursor Composer to work and it's going to go through. And it's going to start creating the pages for your app right there in front of your eyes and adding them to your code. You can see it's actually adding in all of the code here and creating what I need.

I just click Accept All and then I can actually run this app Now, after three days of coding back and forth with the composer, I found an absolutely awesome high level developer. By the way, way more advanced for me. I basically have a front end, back end, a database and everything I need to run this app.

I've also got the setup instructions, which again I asked the Composer to generate for me in a simple fashion so I'd know the commands to get the app started. So here we simply open a new terminal window and run these commands in different terminals. This is the back end.

And then we click plus to do another one for the front end. Paste those commands in and boom we're up and running. You can see the back end is working.

You can see the front end is working. And if I command click this link, it'll take me straight there. Oh, and look at that.

Okay, there's no formatting whatsoever. This looks absolutely rough as heck. But don't worry, I'm going to show you another tool to introduce styling and awesome responsive style web pages.

But first let's let's just check it works. Okay. That's good.

I've got a log in with Google Prompt. When I click continue, I get logged in and I can see that my dashboard, I can see everything's here. But it doesn't look great.

Yeah, it could do with a little bit of styling. And this is where my next tool comes in called v0. Again, I'm going to link all of these tools and techniques down below in the description.

And if you're enjoying what you see so far, do throw a like on this video so that more people will hopefully see it and benefit from AI powered developments in coding, and also subscribe to the channel because I'm always doing tutorials like this one. Okay, v0 is brilliant because it can help you ship ideas, products and basically make them look beautiful. This is essentially your front end graphic designer I'd like a nice looking dashboard for YouTube comments, all in their own charts, and enter to that.

And it's going to go ahead and create a nice component that displays those cards. And look at this. It's actually coding it right here for me.

Pretty cool stuff. That's not exactly what I had in mind. So I gave the AI more context and this is what it came back with.

This. I'm really liking your YouTube comments. Use a great video.

Keep it up, I generated reply. This is kind of what I'm looking for, so with the right prompting you can get exactly what you want. It's even giving me a regenerate button.

So this is the bare bones of what I'd like. I love the design. I just want it in dark mode.

So in order to get this into Cursor and into my app, I just go to the code here. I copy everything from v0. Now, in order to get this beautiful design in.

I just said. Style my. And then at tag dashboard, which is, of course, the file that I want to style correctly, like this in dark mode.

And then paste in the code from v0. okay. Cursor Composer will know what to do with this.

Hit enter and it's going to go ahead and start generating a brilliant style sheet for my app. Okay. And within moments it's created a beautiful looking style sheet here for my app.

And it's actually in real time updating the code here and here to make it all look absolutely beautiful. And when this process is finished, I can go back to my app. And all it requires is a refresh of the page And look at this.

A beautiful dashboard has been created even with generating AI replies showing and those replies and the whole dashboard looks a whole lot better than it did before. This app is now fully working, and it's ready to ship as an MVP. Now before I was ready to fully ship this app, I also wanted to logo.

And that's where Midjourney comes in. Now you can use any AI image generator, but I particularly like Midjourney. And look at this.

After a few prompts inside Midjourney, I really didn't use much. I just said logo comment Genie. Also logo vector, comment Genie.

And eventually it landed on this rather brilliant design. I was really happy with this, so I could actually go ahead and download the image here, and then use it in my Comment Genie app. And then over here will refresh the dashboard and look at that.

There is my logo, nicely inserted of course using Cursor Composer to get it in there. A nice looking log in with Google button which will get us straight into the app. This is taking me just three days and a bunch of AI tools that I'm going to link down below to show you how to do this, but they're all absolutely invaluable.

You can use Replit to keep uploading your code in the cloud and testing it on your local machine or on the internet. If you wish, you can use cursor with cursor Composer as an invaluable work mate. Essentially, you jam back and forth with the AI you simply go ahead and jam back and forth with cursor.

It does the heavy lifting with you you've got v0. That can give you beautiful design ideas for your app and make things look absolutely incredible. Midjourney help me generate an app logo in no time at all that I could download and use instantly.

And also a mysterious looking wizard holding a magical bottle. Very nice. couple of extra tips to make this coding experience optimal for you.

I was using the YouTube data API a lot to do the calling of comments and responding to comments in my app. You can actually copy the URL of the documents to that API. And then go to Composer and type at docs, and then you'll just click docs there, and you can add a new doc and paste in that URL So Cursor is bang up to date when developing your app.

Now I can just say something like build a function to reply using at YouTube Data API, and then I can be more specific as I wish, but it'll always be up to date with the very latest documentation. And that is a killer feature of Cursor. Another final thing that I did to make life easy is I said to Cursor Composer at Codebase, which means it will look at the whole of the code that's been generated every single file.

Make a nice, easy to understand, README. md file. A readme file is generally what developers put in the root directory of their app, just to explain what it does, what the features are, and also what technology it's using, plus how to get it up and running.

So this is a really helpful command just to create something that helps me understand what I've made. And then for deployment to actually make this app public so beta testers can sign up and use it, which by the way, if you want to do that, link is down below. I just typed in codebase, make a docker compose yaml file and Dockerfiles to build this app easily.

Now if you don't know what Docker is, Docker is absolutely fantastic. It helps you to build apps and make them portable so they can run on any machine. Either your local machine or somewhere in the cloud.

So you can actually host this app. Now I create a Linode to host the app. It's essentially a machine in the cloud that hosts your website or your app.

It's really easy to use and I've mentioned this in previous videos because I love it. Link will be down below in the description. If you want to try Linode with a free $100 credit, by the way, so you can choose your OS distribution Debian 11.

I like to go for a select a region so you can place it wherever you want in the world. And then I choose the basic plan, which is just $5 a month to spin up a machine where I can essentially upload this code and run it. Now, doing that is a little bit beyond the scope of this video, but again, ask AI.

It'll tell you exactly how to do it. Linode, otherwise known as Akamai. Absolutely brilliant for hosting websites and apps that you create using the stack.

I've shown you in this video. So once I had everything built. And it took me about three days to brainstorm tearing my hair out.

As I was trying to do the Google login OAuth thing. That thing is complex, but I got it sorted with the help of AI. I then log in to my Comment Genie app and it generates AI replies.

As you can see right here to my latest videos that have comments on and I can simply check this and see what I'd like to reply to. So what about this one? Love you!

That's a good one. Now I can either go with the suggested reply or click regenerate. It's going to make me a new comment.

Oh love you too. Yeah, that'll do very nicely. I can click post reply and my app instantly posts.

This is all very good. You launch the app, you're happy with it. But what about when you start getting that feedback from beta testers, such as a big shout out to Michael Wagner, who's been a really big supporter of the app And Michael says, very impressive.

I can already tell you that this is going to be one of my favorite tools, and he's actually got back in touch and said that it would be nice because he replied to a comment in the regular YouTube interface, and it would be good if Comment Genie would recognize that. I'd already replied, well, of course, using Cursor Composer, I can tag my back end file here. I know that's called mai.

py. Make it so that the API checks If a YouTube channel owner has already replied to a comment before displaying it, and because the composer will go through, look at that file, generate a new update to that file to make sure that feature is included. It really is as easy as that to act on feedback from your beta testers.

If you're building and testing an app, or if you've got something that's live and deployed, you can update it just like this. And it does all the work for you right here. This kind of stuff is super powerful.

I'm not going to say it's easy, and it'll just take a few hours to make a million or billion dollar app. It certainly won't. It still requires human brain.

Well, for now, until the AI agents fully take over and we're already seeing things like Devin. And there's also Replit agent that I did try out, by the way, when building the app, it got quite far, but it fell over completely at the OAuth area for Google. It just just wouldn't do it.

So I had to work through step by step with Cursor Composer and I found that to work for me. I hope you found the ideas in this video helpful. I know it's been a rather technical one, this one, but if it's helped you in any way, do let me know in the comments down below and share your thoughts and feedback.

Maybe if you think of a better way to build the app than what I've demonstrated here, do let me know. Because I'm all ears and I'm actively making this app right now, so I'd love to hear any way that I can optimize either using AI, new prompting, or new ideas. And also sign up.

There is a link down below to go and test the app out for yourself. It is completely free to try while it's in beta. Enjoy.