I Used AI To Build This $900K/mo App In A Day

all right so these are some plann identifier apps on the App Store and as you can see the plan in planed identifier app is making over $900,000 a month and nature ID is making over $500,000 a month and this one is doing more than $80,000 a month so these are basically planned identifier apps and today in this video we are going to replicate and create the core functionality of this app completely using AI I mean let me show you what I built using AI today so this right here is the plan identifier website that we are going to build today so as soon as a person lands on the page they'll be given two options so either they can upload an image on take a photo live from their smartphone so when a person click clicks on this button they will get an option to select an image and once they do so the image will appear in here the status will change to identifying and within less than a couple of seconds they'll get the important details like the name of the pl the scientific names a description and also a table containing important informations of the plant okay and this website right here you can to build it without zero coding knowledge and that's exactly what we're going to discuss right in this video so this right here is the core functionality of those apps that we seen earlier and these apps are making hundreds of thousands of dollars every single month so if you know a little bit about coding you can go ahead and push into production and start monetizing it and make a lot of money so in this video I'm going to break down how I built this planned identifier web app in nextjs using clo Ai and anyone with zero coding knowledge can follow along and create this particular app see I already have some coding knowledge and I know next react and stuff like that but even if you have like zero knowledge on these domains or these coding languages you can to build apps like this using Cloud Ai and that's exactly what we're going to see in this video to build this website we are going to use an AI tool called Cloud AI it's a chatboard similar to chat GPT but it performs better when it comes to coding sort of things so all you need to do is head over to cl. a. website and sign up for a new account and once you're there let me just go ahead and PST a command something like this create a planed identify website in next js14 using the app directory and no SRC folder so as soon as the website loads the user should be given the option to upload an image of a plant and the website should show the name and other imported details on the screen and as for identifying the plans you can use the Google gini API also make sure to style the website in a modern way using Trin CSS so let's go ahead and send this message okay okay the AI has started generating the code for the same so let's wait till it is done all right now A has given us a lot of steps and code to get started with the project so the first thing that we want to do is to create a next JS project so in this video I'm not going to use vs code or any local IDE instead I'll use repet so repet is basically like an online IDE where you can test code write code and do all bunch of stuff so all you need to do is head over to rep.

com and create a new account and I'll go ahead and click on this option that says create reppel and let me just select uh sorry nextjs app directory and I'll click on the option that says create repple and wait for a while okay okay in meanwhile let's go ahead and see so these are all the configuration settings that we need to do but uh since we are using rapit it will be all taken care of the first thing that we need to do is to install this Google generative AI npm package so let me just go ahead and copy that one and I'll go to Shell paste it and hit enter so let's wait till it is installed and the npm package is now successfully installed so the next step is to go ahead and grab our Gemini API key all right so I'll I'll I'll do that in a bit so let's move on and replace the content of page. TSX file okay I just copy this one from here and I'll go into the app folder uh page. TSX and delete the entire content here and paste the new code okay all right next we need to create a new file called image upload.

TSX in the components folder all right so I'll go ahead and create a new folder called components uh okay components and create a new file called image upload. DSX okay all right that's done now forther scrolling down what next okay we need to create another file called plan info. TSS all right plan info.

TSX cool let's past the code now forther scrolling down we need to update the content inside the layout. DSX file okay let's just copy the code uh layout. DSX file here here it is replace the entire content with the new one next we'll have to update the global.

CSS file to include the Tailwind CSS directives so let me just copy it and head over to global. CSS so it's already done so let's leave it for now now forther scrolling down um it will be taken care of okay all right so if you look at here you can see that we need a Google gerini API key for this app to work so basically we are going to use Google gerini at the back end so to get the Google gini API key just search get gini API key in Google and click on this first results okay and as soon as you land on the page click on the button that says get an API key and it will now load the Google AI Studio website okay and you will find an option that says get an API key and click on this option that create API key and when you click on it you will be asked to select a Google Cloud project and you can just select it or create one from scratch and you will get this API key now that I've already created one let me just go ahead and copy the code like that and now when you create a nextjs project or react project and if you want to add some sensitive information like the API key you should actually create an environment variable file and add it to there but in this case since we are just doing it for demo purpose then we just hard code it right here and also repl does not support this env. loal file so you'll have to add a secret something like that uh I'm not getting into that in this video but let's just add and hardcoded right here all right okay that's all the steps that we need to right cool now let's just try to run the app by clicking the Run button and let's see what it comes up with okay it's loading so let me just click on this button to open it in a new tab all right so it's like a basic version but don't worry we'll go ahead and incrementally add new features so first let's just try to upload and planned image and H we get an error it says failed to identify planned please try again okay all right so in this video I'll also show you how to troubleshoot and fix bugs using AI so even if you encounter and run into any sort of Errors while developing an app so this is what you need to do I'll just go ahead and copy this code head back to clo and I'll okay I'll type something like it is showing failed to identify planed please try again and I'll send it and this is the uh response that uh Claud gave me so all I got to do is to Let's improve all right okay to log the error we going to replace the code inside the image upload.

TS file and include some more files all right let's do that and make sure the PK part is done further scrolling down yep all right all right so now let's just go ahead and try it so I'll go ahead and upload a new image and uh it says API key is invalid oh my mistake I kind of replaced it here right so when I replace the image drop load. TX file I accidentally deleted my this API key let's go ahead and add it again so let's go ahead and copy this code once again and let me paste it there so let me just keep this API key here and we'll just copy the code again and okay let's just do one thing copy the entire line and place it here all right now let's see what it comes up with let's just go ahead and refresh the page again all right so now let's just go ahead and upload the image again and now it says failed to identify plan okay it seems like the gini 1. 0 Pro Vision model that we are using is deprecated as of July 12th of 2024 so we'll have to use gini 1.

5 flash instead all right so in this case all you got to do is to replace the current model with this one but just let's just copy the entire message and send the exact same message in Cloud again and I have just sent us message and here we have an updated image upload. TSX file okay let's just copy it and go ahead and I'll replace it just like oops just like so and also let's take take care of the API key part all right so let's go back again and now let's just hit and see if it works okay failed to identify planned unexpected token so let's just copy that one that heror message head back to clo repeat the same process I'll just send it send the message to CLA and let's see all right so all right so the problem is that the way uh the response is being sent by J API include marked on responses but we only need Json so for that we have an updated code let's just copy it again head back here and let's paste it in here cool and now let's also replace the AP key once again okay head back to the website let me just quickly refresh it okay selecting the image again ah a boom now we get the name of the plant the scientific name and also a bunch of description now let's go ahead and further modify it to include the image so whenever we upload an image we want the image to appear on the page as well so let's see how to do that so I'll go ahead and say something like I need more features on the app first when a user uploads the image I want to display it on the screen in a nice way right after the description just below it I want to show the table containing some information about the plan add some more elements uh to the page to make it more attractive and heading and some text as well all right so let's get started so copy the page. DSX file go ahead and replace the component here all right now let's just okay let's just update the image upload.

TSX file and replace the API key as well next update the planned info. TSX file all right just like so next update the global. CSS uh well let's leave it for now and let's see what it came now we have a heading a description and let me just go ahead and upload an image and see okay now we have the image okay now the image is visible on the screen and we get a table explaining some more details about the planned that's cool now let's go ahead and further modify the app now I will go ahead and add some more instruction like add a navigation bar to the top of the page and include a few links to home about contact and others add a footo section with some more additional info about the website as well all right for this we'll have to create a new navb bar.

TSX file let's copy the copy and go ahead and create one navb bar. DSX paste the content create another one called footer. DSX uh footer.

DSX right next update the layout. ESX file to include both these new files all right let's paste it and finally let's update the page. TSX file cool what else and now let's go back and refresh the page and now we have like a navigation bar with a bunch of links and also a footer with some explanation as to what is this app C links contact us and a bunch of other information all right let's go ahead and add some more features okay and now one more important thing about Cloud AI is that you can go ahead and upload images of existing web pages and ask it to code that particular page as you see in the image okay so in this section here I can see I just uploaded this particular image to clo so this is basically like a cards element and we have like six cards in here and I uploaded this image and told um just below the upload section include a section where it explains how to use the app and what information users can gain as for the design of the cards take inspiration from the image attached and make sure to include icons in each boxes as well now I'm literally asking I'm attaching a photo and asking clae AI to quote something similar so let's see how what cloud AI came up with so first up we'll have to create a new file called feature cards.

TSX all right we'll go in here create feature cards. TSX and paste the content and next you got to modify the page. TSX file cool let's go ahead and modify where is it uh here let's uh replace the page.

TSX file and we also have as for icons we'll also have to install react icons npm package so I'll go back it will show a bunch of error we'll fix that right now we'll go ahead and paste the npm install command press enter to install react icons npm package all right so the npm package is now successfully installed let's go back and we now need to do a slight modification to tail config. js file let's copy the code go back to the tailing config. js file and I'll go ahead and replace the content in here like this yeah and boom look at it so uh let me show you the image that I uploaded okay all right so so this right here is the image I uploaded and I asked clae to use this same design and add a bunch of cards explaining how to use the app and what kind of information users can gain from this website and this is what cloud AI came up with and it's pretty similar right I mean except for this border part it's like almost 80% accurate right now we can go ahead and finetune and ask more commands to make it look EX exactly like that and now let's try to go ahead and and now we have a weird black Gap in here right so let's try to fix that so I'll go ahead and ask there's a weird black gap between the features card and footer fix it and it gives us an updated code so copy head back layout.

TSX file paste it and also update the page. TSX file as well cool where is it yep let's go ahead and paste the new content and that should be it and boom okay still we have this black color thing key but the size has reduced and it now looks far way better right let's just try to upload an image again and see how it looks and as you can see the image now uploads okay the image and all of the details now appear below the features card so this is not what we want we want this features card to appear right after this box so let's go ahead and manually fix that so where is the okay let's find the okay features card is being displayed in here so I'll go ahead and uh add that from there and put it in here uh right put it in here maybe uh right not there exactly well yeah it worked now we have the image the details about the uh plant and also how it works card section as well and now this app has only one feature where people can upload image that's already in the device right now let's say I want to go ahead and add a feature where people can open the camera directly within the website capture a picture and then get info about the plan so let's try to implement that apart from uploading the image user should also be given the option to click a picture from their devic's camera directly as well once the image is captured plan details should show up on the screen cool now let's just go ahead okay you need to update the image upload. TSX file let's copy the code head back to image upload.

TSX file and they'll replace the entire content in here to add the camera functionality all right let's just replace the uh API key right here okay what else uh we'll have also we'll also have to update the page. TSX file let's go ahead and do it control a control B what else react icons we have already installed it okay so let's see now let's head back and all right now you can find a new button that says take photo so when you click on this upload image option uh image uh drawer will appear and you can go ahead and select the image you want to upload and when you click on this take photo option you will the camera will be opened on your device and you can go ahead and capture a picture of the plant and upload it directly so let me show you how it works on my smartphone so let me just load this page and we'll go ahead and capture a random picture of a plant just like so let me click on this button and wait for a while and boom now we have literally captured a live picture using the devic's camera and now we got all the information that we need so that's pretty cool right now to customize it further I want to add one more feature so as for a background can I add a moving Green gradi in background for the entire website so when I gave that command it gave me a code to update the global. CSS file let's go ahead and copy that one I'll head back to global.

CSS file go ahead and paste the command and also update the layout. DSX file where is it yep let's go ahead replace the content and also the page.