Building apps with AI: The full stack

- [Instructor] So let's talk about the full stack here. First of all, the main tool that we're going to be using is called Cursor. Specifically, especially when you're going really deep into the code and the crafting, we're going to be using Cursor Composer, which allows you to build really advanced app with multiple files reading your codebase. It's going to write the code for you, it's going to create new files for you, it's going to be absolutely amazing. And then obviously at the very beginning, we're going to be talking about ideation and creating the user interface. You can use tools like Ideogram or Galileo to generates the UI for you as a starting point. And you can also use v0 from Vercel. That can, again, generate UIs and get the code for you. I think that's really good. Obviously we're going to be using Claude AI Artifacts in projects and you know, we're going to be feeding it with multiple files in order to generate the coding. And this is definitely a lot more solid, a lot more iterative. And it tends to use libraries such as Lucide for icons, so you won't have to go bit back and forth between the design tool and the coding tool. I think it's important to really focus on the target and then we get into the sort of meat of the project, which is how do you deal with users, how do you deal with a backend? So for example, if you send an email or if you decide to charge your user with a payment plan, so you're going to need something like Stripe, again, that needs a backend. So Firebase is really useful for setting up the users, the login screen, the authentication. So I know a lot of courses out there, they show you how to create some really basic UI in 5, 10, 15 minutes. I think they're great. I think it's really nice that you can create something fast and amazing in such a short period of time. But we are here for the long game. We are here to create and solve really, if possible, big problems, like a video editor that I created, look at the 100s if not 1,000 amount of prompts and commits that I put on . It's really insane. You can really sweat through the details and you can really get AI to help you through that process. And, of course, at the beginning, you can use UI kit and icon sets such as Shadcn, which is really popular. It has a lot of components that you can use for your project. But at the end of the day, to be a true creator and to create something truly unique and different, you're going to want to learn something like Tailwind or CSS or, you know, get really deep into the code. So why do I like Tailwind is because it holds all the context. It's short, it's very easy to work with. You can literally copy and paste this entire code here without having to go back and forth between the CSS styles and the code and the HTML or between style components, and, you know, going back and forth. Tailwind holds all the information, which means if you have all the information in one detachable sort of component that holds the cells as well, then you hold the power and the key of context, which means that when you're going to give it to AI, it knows everything that you want to create and it can take that and recreate it really easily. And so Tailwind excels at that and we're going to be using that because it helps us create the perfect, most flexible UI possible. And this is going to be Cursor. This is going to use a bunch of extensions such as, you know, the theming Prettier for code formatting, Tailwind and Tailwind Fold. These are some of the basics that I'm using. It's really important to keep it super clean. We're using TypeScript, which means that we want to make sure that it has no error and we want to be completely in control with every single file that we have. And you can see, I try to keep things super simple and in one folder called components. Why I do that? It's because I don't want to get into this problem where, okay, where do I put my file about this, this, this, and that. So I just try to keep it simple. It's also great to feed to AI, especially for projects in Claude AI. You're going to be able to just give them the whole folder of files that you want and tell Claude AI, this is my context, please create something with it. The other thing you need to understand is that we are obviously using React and Vite, but there are also other options. It's really easy to move between those platforms. Especially with AI, you can translate the code into different platforms. We do have a course about Swift UI, for example, and React Native. And here we also have the backend. So you have the functions, you also have the server, which you can use, let's say, if you want to use Express.js and you want to run FFmpeg in the background. So you can do that using a server. And obviously we're going to set our environment key so that it's super secret and far from prying eyes. And then, you know, we're going to set up a Tailwind and all of that stuff. We're going to be using the amazing, you know, Cursor Composer, which, again, it's going to modify so many files all at once. And you can iterate from it. And obviously, for smaller projects and files, this is what you're going to be using, which is the sidebar chat. And this is great for modifying lines and it kind of, it's more like a conversation versus Cursor Composer. It just applies for you. It's more aggressive and it, you know, you can fit it with more context and it's going to create new files for you. So you're going to learn the nuances of all of these development techniques. And you know, we're going to pair that with obviously really good and solid foundation for design. And then it's going to be amazing. So before we start, I just want to say a lot of the difficulty in creating an app with AI and just getting into code in the first place, it's not so much about the difficulty of the craft itself. Of course, yes, it can get very difficult and unfriendly and unforgiving, but at the end of the day, it's all about getting the right steps to build the confidence and to have the right tools. And today, we're so lucky to have these incredible tools that lets you experiment before even getting into the very, very difficult part. So looking at Claude Artifacts, for example, which lets you experiment with ideas and code and have access to a full-blown AI model to create something as amazing as this, which would take days if not weeks, to get to this part, I think that's incredible. And then we have something like v0, again, allowing you to have iterations and multiple different samples and template and changing the theme, just the same way you would for doing that in Figma. And then you have Galileo, again, using a prompt and then generating a UI and all of this, providing the code and sort of like making you kind of try to understand one by one, on demand, without kind of fitting you with everything all at once. And at the beginning, it's going to be scary, of course, but eventually, you're going to be like, okay, I understand this is an icon, this is a component, this is something else. And you know, then you start to sort of like, oh, why do we have so much code just for icons? Why don't we just use something like Lucide, which is just one single word, and you can get your icon because it's a library. Why don't we use, you know, states or React or understanding the differences between platforms. You're going to get better picking up these skills and these kind of sixth sense, we call them in coding is, you know, you're going to be able to scan the code really, really quickly. At the beginning, you don't really care. You know, you just need to know, oh you know, I can do this. I want it this way. I want to add new shapes. And that's really cool. And you know, it kind of breaks that barrier at the beginning and it really, really helps. But eventually, you know, again, with this course, we are not just creating something really small and really simple. As we move on progressively, we're going to create something far more complex and we're going to get into the nitty gritty. We're going to understand how to detach the styles, the components, and copy and paste the right way, and using Cursor Composer, all of that beautiful stuff. And learning all of this is just going to be one holistic experience at the end of the day. And I hope you're excited. So we should start creating right now.