Aider + Claude + NextJS + Supabase : Generate FULL-STACK Apps with Claude 3.5 Sonnet

hi welcome to another video first I learned C until I finally memorized data structures people came to me and said it's the age of web and you should learn PHP then I learned that then people came to me and said oh everything's going to be on the client side then I learned JavaScript then people said oh it should be more interactive and easy to use for the user so I started using react now people are saying that you don't need to learn anything because apparently computers will do everything themselves because of AI so now I am making videos about AI so that AI can't replace me anytime soon these claims were first thought of as a gimmick but as the llms are getting stronger these claims are really becoming real I mean I have done a good number of videos on text to application software and I recently created a video where I made a whole working game with sound effects and everything using CLA in that video I asked you guys if you want me to make a whole full stack application with ader and Claude and many of you said yes so today I'll be making that now the question arises is what will I be creating and what will I be using well I'll be using nextjs as the front end and I'll be using superp base as the backend I'll be creating a whole application with a landing page authentication and everything I'll be using these tools because most people use them these days and this will ensure that we are using a proper front end and back end that the world is using now what will I be creating well I'll be creating a calendar app this calendar app is going to be similar to something like Google Calendar where you can create events schedule them on your calendar and view your agenda and the stuff that you generally do with a calendar app as already mentioned I'll be using Claude 3.5 Sonet and AER to make it I won't be touching any code file apart from setting up in enironment variables and other basic setup stuff like creating tables and other things so let's get started but before we do that I'd like to tell you about today's sponsor ninja chat ninja chat is an all-in-one AI chat platform that allows you to use multiple AI models like gp4 Claude 3.5 Sonet Gemini 1.5 Pro mixw stable diffusion 3 and music generator for less than one chat GPT membership cost the membership starts from $9 and goes up to $25 but if you want an even bigger discount you can use my coupon code code King to get a 25% discount on all kinds of memberships you can check them out through the link in the description now let's get back to the video okay so first we'll need to get AER installed you can do it easily with the PIP install AER chat command once done export your anthropic API key like this now you can use AER with the AER command but before we do that we'll need to create a nextjs project to do that let's run the create next app command let's name it calendar app okay it's now created let's navigate inside the folder now let's run the AER command so first let's ask it to generate a simple calendar app that connects with superbase for authentication and everything also make sure that you give it a detailed prompt to get better results anyway let's send it okay so it's getting generated let's wait for a bit okay so it's now generated now let's run it before running it it make sure you run the npm install command so that every dependency is installed now let's start it okay this gives an error let's paste this error in AER and ask it to fix this issue okay so it says that it has now fixed it let's look okay so it's now asking to add the environment variables for superbase credentials so to get that I just created a superbase project and got the URL and a non key from there then I created an EnV file and entered the details like this now it works fine as you can see this is the login and sign up page the text that I write in the text boxes is unreadable because it's white but anyway I got myself registered and logged in and this is how it looks as you can see the calendar looks pretty good and has the controls and everything but nothing works right now so first let's ask it to fix the design to make sure that everything's readable okay it has now done that and now you can see everything's readable now let's ask AER to connect it to the database and make it all work okay so it has done that now and is asking to create a table in superbase so I did that and created the table in super base there were also some other issues which occurred I got them fixed as well and now I can create events but the previous month next month and the different views do not work so I fix that with some more prompting and now it works it's pretty cool you can create events in any month see your agenda for the day week and everything although the time for each event is still missing when we create created it so I added that as well and it's pretty cool now then I also fixed some more things added a sign out button and named it calendar King also if you have made it this far in the video then comment calendar King I want to see how many of you watch my whole video because I see many people commenting without even watching the video anyway after this I made more amendments to it with ader I added a landing page made it more beautiful added framer motion and everything so now let me give you a walkr of the final application that I have made here without any kind of coding so this is the landing page it looks pretty good it has a good Banner section features section testimonial and a CTA Banner as well if I click on it you can see the cool looking login and sign up page over here if I sign up here you can see that it also sends a verification email from superbase once you are verified you can sign in and you'll see this calendar you can click on any date enter your event name and time and it will get added I have added animations using framer via AER and that makes the whole application a lot smoother you can also see multiple views as well as go back and forth in months this looks insanely cool I'm not a marathon programmer so it would take me about 7 8 hours to make but this got created in under an hour and even if you're a marathon programmer then just think how much better a product you can ship in the same time it's really insane to see things come to life also many people ask me what it costs let me tell you that it's all under the $5 free credit that Claude provides so that's also pretty cool it's crazy to see how far AI models have come if you are interested in making games with Claude then you can look at this video I'll link it in the description or if you want to make games with local models then stay tuned for my tomorrow's video where I'll tell you how to do that overall it's pretty cool anyway let me know your thoughts in the comments also if you liked this video consider donating to my Channel Through the super thanks option below also give this video a thumbs up and subscribe to my channel I'll see you in the next video till then bye [Music] oh [Music]

Channel: AICodeKing

Views: 10,588

Keywords: text to application, creating full stack application with ai, ai creates application, aider, nextjs, react, supabase, full stack app with aider, nextjs app with ai, generate apps with ai, create games with ai, ai created this app, text to frontend, ai app creation, generate application with ai

Id: sKeIZGW8xzg

Length: 9min 33sec (573 seconds)

Published: Fri Jul 12 2024