AI Built My App and It's INSANE! (Galileo, Claude, Cursor)

Here is a brief summary of the transcript: The speaker builds a journaling web application from start to finish using three AI tools - Galileo AI to design the frontend, Claude to generate the initial code, and Cursor to refine the code. Key points: - Galileo AI is used to generate a simple design for a journaling app with a home page and categories. - The design image is fed into Claude to generate React/Next.js code with Tailwind CSS styling. - The generated code is copied into a boilerplate Next.js project created with create-react-app. - Cursor IDE is used to refine the code - it applies fixes and additions to the whole project with access to the full codebase rather than needing copy/paste. - In around 15 minutes a basic working journaling app is created with filtering by category. - The speaker emphasizes how much easier and faster this process is compared to manual coding, especially for those without years of coding experience.

Hey, so have you ever wanted to build a front end application, but you just didn't know how to get started? Well, AI has made it easier than ever to do just this. In this video, we'll build a custom journaling application using three new AI tools. We'll use Galileo AI to design the front end and then we'll use claw to generate first version of the code. And then we'll refine the code using cursor, which is an AI assisted integrated development environment. I know that's a mouthful, so bear with me. Let's get right into it. Okay, so let's dive right in. But before we do that, let's also start a timer so you can see how long it will take us to generate this app. Alright, well, Galileo, there's a link in the description for their website. It's used at Galileo AI. It's an AI tool that lets you generate front end and mobile app designs. As you can see from the website, there's a tons of examples of different prompts and designs that have been generated by Galileo. So we're going to do a text UI for this application of ours. And as you remember, we wanted to generate a journaling app. So we're going to use a web app which is easier for purpose of demonstration, but you can also generate mobile app designs. So let's type in what we want Galileo to generate. So we want a simple. Okay, so there you have it. Apologies for the typing. Galileo is going to just working on the design right now. So let's see, it's, yeah, it looks good, right? New general antiform looks good. While it's working on the design, which takes, takes a little bit of time, I'm going to show you a different feature as well. So this is one that I've been using a lot of because it lets you tailor the style a lot better than you would be able to do with just words. Right. So this is a feature of Galileo where you can upload pictures and then use those pictures along with the prompt, along with the description of what you want Galileo to generate, to generate designs for different pages. So as you can see, I've been using this a lot for an app that I'm currently working on. It's also linked in description. So let's see what we have here. This is our app. So it's actually generated four designs. Let's see which one is nicest. This is with a single button. Okay, there is another one. Let's generate the full app. Actually, that's a new one that's a lot. Okay, so let's ask it to. It needs to be a single page app. So generate just a home page with all. Let's see. Okay. Right. So we should have probably mentioned a single page app. This is. I did some trials of this, and it actually, the first time I tried it, it came up with the design that I kind of had in mind. So goes to show more experience isn't always better. There we have it. Something that's close to what I had in mind, even though my name is Jackie. Right. Did come with the same name as before. That's interesting. See what the other one is. But this is already pretty good. So I'm just going to save this image app design two. You know, if you know, you know the other thing, it does generate code, which that's HTML, so it's a little bit hard to work with. But if you want to tailor this, if you're happy with this, but you, for example, you want to remove a couple of the tabs and you don't want to prompt, you can just copy the whole thing and it will paste it into Figma, and then it will have all the elements in there in Figma. So you can actually start working with it in Figma right away. So it's also something I've been using a lot in this app for this app, so it's overall really nice. The one missing feature, I would say, is that it doesn't allow you to group work by projects, because I'm working on different projects, and it's all just one single interface, and you would need to set context at each point. I'll show in a minute what I mean with projects, because cloud, for example, you can do this. Okay. I'm not sure what it did with the other one timed out, apparently. So we're just gonna use this one and go roll with it. But you can, of course, refine it in multiple ways. So we're not gonna go into this. So we have a design we didn't need to use a designer, and now we're gonna generate a first version of the page using Claude. So Claude is a large language model that's been trained to do all kinds of different things. Okay, so this is, this is the cloud interface. And what we're going to do is we're going to add the image that we just downloaded from Galileo AI, which is this one. It's now been added, and we're going to ask Claude to generate code from this image. The app that we're going to build this is based on my experience. So you might want to use, you might want to generate different code, but I'm going to ask it to generate code for a react app that's running next js. And it's styled with tailwind for the frameworks that I have most experience with. But of course, you might want to do this differently. Generate. So it's gonna. Right, so it's picked up on the image and it's gonna do. Yeah, generate the code for us. While this is running, let's already create the boilerplate project. So we're going to do that by using something called create React app, which is a boilerplate plate. To get you started with all the necessary components, you need to run an next JS react application. As you can see, it's in the background, it's generating code. And we're gonna call this journaling app. It's already a file there, so let me remove that from our previous one. Yeah, and we don't want to use typescript. We want to use lint and tailwind. That's fine. That's fine. Yeah, we're gonna use defaults for everything, basically. So no need to think too much about this. In the meantime, you can see it's, you can see a preview here. It won't run, but of the journaling app that we had in the image from Galileo AI. As you can see, it's this one. It doesn't look exactly like this. So we might want to polish this down the line, but it's a good first step. And this is a lot of code, as you can see here from the code section. This is all these details that we don't need to worry about. I mean, especially tailwinds justice styling. This is a lot of work to write out yourself. Front end code in particular. My experience, I mean, I'm a machine learning engineer, is very verbose. So it's a lot of detail that you need to know to get it right, which you no longer need to know, because now you can just ask an AI to do this for you. So we've copied the content here, and we'll also ask it to. In the meantime, let's open this folder. Right. So we have, this is the. Just to get back, this is what we've generated with, not with AI, but this is just a boilerplate bootstrap for next year's project. So we have it here. Let's see, drawing up. We are opening this with Cursor, which is our AI assisted integrated development environment. What we have here is, this is all code that is generated from the bootstrap project. So this is not generated by AI per se, but this is all code, these are all files that you need to start a simple next JS project. So let's see what this run looks like. We're running it with NPM run dev. Don't worry too much about the details. Let's see what it looks like it's going to compile. As you can see here in the terminal it's currently compiling to run. So this again, this is a boilerplate next JS application. And what we're going to do now is we're going to copy the code that Claude has generated for us into the project. So let's see, it's telling us a couple, it's giving us a couple of instructions. So we need to install the seed react, which is a package for the icons. And how I do this is typically by finding the. But I don't know which version. So I usually do this by going to NPM J's. I guess there's probably better ways to do this. But hey, I'm not a front end engineer, so you can see the latest package is zero point 435 and we need to add this to the package JSON. We'll install the and then we can rerun it. It won't have changed anything here, right? It's still the same bootstrap generated project. And then we're going to add the code from the that's been generated by Claude. So we have a component here, this one. We're going to copy that. All right, so you have a component. Don't worry too much about the structure here. This is basic setup that is used a lot in front end development. Okay, now we have the app, the page, which is the homepage that is currently showing the boilerplate code. We also need to copy that part of the code here. Let's see, it's this one here. We are importing the generated component. Okay, so let's see, let's see what happens when we do this. Looks like it failed to compile. There is an issue. Yeah, this is a typical react thing where you always need to have components. You usually have to use, you have to set them as client components so they're running in the browser. Let's see. Okay, well, we have something, but it doesn't really look like what we had in Galileo AI. Right, I guess the styling is off. So one thing that we're going to do is we're going to ask it to fix all the issues and we're going to do that by giving our AI encourager access to the full project. This is one of the neat things that I think is a big improvement from something like GitHub copilot, where you, where you no longer need to provide it with individual pieces of code to let it generate the right context or to let it use, where you no longer need to give it access to individual pieces of code, which means in practice, a lot of copying and pasting between, for example, Claude and your ide to get it to generate the right code, but you can just let it chat with the entire code base. So we're going to just say, please fix all the issues in the project and we're going to do this by doing, by, and if we press, and when we press command enter, it will use the entire code base. Good changes. So indeed, rather than copying and pasting it, we can just, yeah, this is something we already did, right? So it's already there. This is also something we already did, so it's fine. Also something we already did with this one, rather than copying pasting, we can just click apply and it will add all the changes there. So I'm not sure why I didn't suggest that the first time around, but that there we are. Okay, let's see. So we have them. We have the changes there. And as you can see, it should. Okay, so one thing that we don't yet have is a functionality to select between the different categories. Let's ask it to generate that. So we're gonna ask it, you know, we're gonna give it minimal context in this case. But hey, it should be able to pick up on this. Okay, so it's added categories here in the examples. And there we have the different journal categories. And it's added. It's still generating. It's still generating. There it is. Let's see if we can apply this file. Let's see. Okay, should be there. Let's see. Refresh. All right, so we have some, as you can see here, we have some filtering going on, right. So this is basic. And of course you need to add a backend and you need to add storage. But you can do this with cursor ide in the same way as you would as we've just done with the select boxes. So let's see where we're at in terms of timing. 21 minutes. So this is actually worse than before. But I think in 15 minutes, if you don't mess up and you're not explaining things like I did in this video, you could get working react app in something like 15 minutes. So pretty cool, right? In about 15 minutes or so we were able to generate an application that allows us to log journal entries with minimal coding involved. It's just us telling AI's what to do. And this is such a big jump up from where we were before. I cannot stress this enough, I've been developing software for a living for the last ten years, and I've been working with GitHub Copilot for the last year. And what I'm seeing in terms of AI coding tools that are coming onto the market in the last six months is just crazy. And especially a big shout out to the anthropic team for the work they've done on clot 3.5 sonnet. I think it's just really, really good at following instructions. So much better than anything out there right now that I know of at least. And I think there might even be wider implications because the barriers to entry for writing software applications has just dropped significantly. So maybe the era of having to go levels and levels and levels into drop down menus to find the right configuration settings is over. You can just generate the program the way you want it to and you're done. The only thing you need is a platform or hardware on which to run the program that you've generated. There are some implications there for SaaS businesses and how they will look in the future. I won't go into those in this video, so hit the subscribe button if you want to learn more about this. But to show and prove to you that this is not something for which you need to be an experienced software engineer, there's a link here to a video in which an eight year old girl is doing amazing things with Cursor, right? So no need for ten years of software engineering experience, you can just get started right now. So. And that's all I have for today. So happy learning, happy generating, happy coding, or whatever it is that you want to do. See you next time.