Lovable Full Course by Naman Gupta - Vibe Coding Tutorial

Hi, my name is Nean, and I'm going to be your instructor for this course. This course is on Lovable AI, a tool that allows us to build high-level applications using AI. All we have to do is type in a prompt of our idea, and it builds a really cool application for us based on that prompt.

So, what is Lovable? Lovable uses AI to create apps from scratch. It's that simple, and it works like magic. So, if you have any idea that you want to convert into an app, Lovable AI can do that for you in minutes. It works perfectly and seamlessly, and it's absolutely free. You will build 10 advanced applications with Lovable AI by the end of this course. So, by the end of it, you will be capable of building any application that you want using AI because you will have mastered the art of getting AI to code for you and building applications using AI.

All right, so the first thing we want to do is set up a Lovable AI account. So, you want to head over to this URL: lovable.dev. And on this URL, you're going to see this application. Now, in the top right corner, you're going to see a sign-up button, and we want to click on that sign-up button. So, as you can see now, it's giving us a sign-up page over here. You can sign up with GitHub, you can sign up with Google, or you can sign up with your email address and password. So, you want to pick any of the three and sign up to create your Lovable AI account so that you can get started with building applications with AI.

Okay, so now that we have our Lovable account set up, we can start building our first application with Lovable AI. Now, there's a lot of advanced applications that we're going to be building throughout the course, but the first one that we're going to build is one of my favorites, and it's a website for a space exploration company. Now, SpaceX has one of the most advanced websites in the world, so we're going to be creating a website similar to that, but it's going to be our own space exploration website. We're going to build it all the way from scratch using AI. So, it's a great way to learn and understand exactly what this is, and it's a great way to get your first demo of Lovable AI as well.

All right, so the first thing we're going to do is we're going to write a prompt. Now, a prompt, in very simple words, is basically what tells the AI exactly what we want. So, we're going to tell the AI, in completely natural language, what we want to build. Now, later on in this course, I'm going to explain prompting in detail and how to write the best prompts possible to get the best results, but for now, we're going to write a prompt in completely simple language. So, let's start by writing and telling it exactly what we want. So, we want a website for our space exploration company. So, let's say exactly that: "Create a website for my space exploration company, Pneumonics." All right, I'm going to call it Pneumonics; you can call it whatever you want. And then, let's add some more detail. So, let's say the color scheme. Now, you can go with any color scheme that you prefer, but I'm going to go with red and black. So, the color scheme is red and black. All right. Now, the next thing we're going to say is we want the website to look really good. So, "Make the website really aesthetically pleasing and good-looking. Use gradients, star animations, and images from the web." And actually, we can specify that we want space-related images from the web. All right, so that looks pretty cool. I think that's all we need for now, and I'm going to hit enter, and that basically sends my prompt to the AI.

So, the first thing that the AI does is it names our project. So, as you can see in the top left corner, it's named "Red Cosmic Voyager Site," which is a pretty cool name for a space exploration website. So, now Lovable AI, as you can see right over here, has responded to us right over here. So, it's going to tell us exactly what it's building. It's going to build all of this: a contact section, a gallery of space imagery, a services and capabilities section, an about section, and a hero section with animated stars. And then it's going to tell us how it's going to design it, and it's telling us basically everything that it's going to do. So, that's something really cool about Lovable AI: it tells you exactly what it's going to do and what it's doing at the moment. So, as you can see right now, it's writing the CSS file, and it's going to keep you updated as to exactly what it's doing. So, now it's creating the navigation bar, and that's really, really cool. You'll always be updated with what the agent, or what the AI, is doing.

All right, so we're going to wait for it to create our website. And in case there's any error, we don't have to worry. In normal coding, when you get an error, you have to spend time to debug it, but since in this we're not even writing a single line of code, all we have to do is tell the AI to fix the error, and it fixes it automatically. So, we don't have to worry about that either. So, we're just going to wait for it to give us our website, and the website is going to be displayed on the right-hand side. So, let's just wait for that to happen. It's going to take a minute. So, I'm going to pause the recording and I'll come back when it is ready.

So, in just a minute, it's created our website for us. So, let's read what it's saying, and then we'll look at the website that the AI has created. So, it's saying, "I've created a stunning space exploration website for Pneumonics with a red and black color scheme, star animations, and space imagery. If there's knowledge context or custom instructions you want to include in every edit in this project, set it below." Your website for NemonX requires back-end functionality for potential features such as storing user account information and connecting with other services. You can use the Superbase menu on the top right to connect your product to Superbase.

All right, so let's look at the website that it's created. So, there's a nice logo, there's a nice navigation bar, and it looks very good. I mean, this is pretty cool. Now I can see this rocket, uh, sorry, this, uh, guy astronaut with the US flag on the moon, probably the moon behind, and that looks pretty cool. So, we can scroll down: "Pioneering the future of space exploration and interstellar discovery." We scroll down, and this looks really, really good. This is a very good-looking website. I'm actually pretty impressed. So, this is super cool. As you can see, the AI has created very relevant context. Like, I didn't mention all of this, but since it knew that we wanted to create a space exploration website, it's added all of this context by itself. Like, "Nemonx is at the forefront of revolutionary space technologies and interstellar exploration. World-class engineers, scientists, cutting-edge solutions, cosmos, humanity's reach." All of this is completely within space context, and it wrote all of that by itself. So, that's really cool. The AI is doing 99% of the work, and we didn't have to do anything. So, we can continue scrolling down and see what it's done. I can see the star animations in the background. The stars are blinking, and they're moving. That's really cool, and it has all of our services over here, and we can request a service. Then there's this right over here. This looks really, really nice. I mean, this is a very good-looking website. So, this is the gallery, like it mentioned it was going to create a gallery. "Witness the breathtaking beauty of space through our captivating gallery of images from PneumonX missions." So, these are all of our rocket missions, so-called rocket missions, that have all of these cool images, and this looks actually really nice. So, "Nebula research and Mars mission, Earth orbit view," and it's actually pretty relevant. All of the images are relevant as well. "Space station Alpha, lunar exploration." And this is all very, very good. So, this looks exactly like a very advanced space website. It built that in just a couple of minutes. Now, if we want, we can make this website even more advanced by reiterating and telling the AI what changes we want and how to improve the website. But for now, this was just a very basic demo of how to build your first application using Lovable AI.

So, now we're going to move on to a variety of other applications, and we're going to learn more about how to operate Lovable AI. So, the next app that we're going to create is a Google Maps clone. So, Google Maps is a global positioning system, or a GPS, that almost everyone uses. We use it to find directions and look at locations and understand the location of different monuments, different locations on the map. So, we're going to try and build that through AI, and we're going to write a prompt for that. So, the prompt that we're going to write is going to be again very simple. So, let's say, "Build a local landmarks map of." Now, let's just choose any random city for now. So, I'm going to go with London. "Build a local landmarks map." You can choose any city that you want, by the way, of London. All right, cool. And "use Wikipedia to fetch the landmarks and make it look aesthetically and visually pleasing." All right, perfect. I think that's all we need for now, and now I'm going to hit enter, and let's watch it build it for us.

So, we basically want to create a landmark map system. So, it's named it "London Landmark Lens," and this is going to be super fun. So, I'm excited to build a beautiful London landmarks map for you. This will be a visually appealing application that showcases famous London landmarks with information fetched from Wikipedia. I'll create an interactive map highlighting London's iconic locations with a clean design, elegant typography, and smooth animations. Let me build this for you. So, it's telling us exactly what it's going to build.

Version of that, but if you're capable of building this using AI, then you can obviously build Google Maps with AI as well because all it takes is a bunch of reiteration with the AI. By reiteration, I mean that you have to just, when the AI builds this landmark app, you tell it to add one feature and one feature, and you keep on doing that until it builds the whole thing for you. So, that's all we need to do. So, as you can see, it's writing all of the code on the left, and you can actually view the code later on by clicking on this right over here. We're not going to do that for now because we don't want to interrupt the AI, but later on, once it's done building the application, we can actually view the code, and we're going to do that in this project. So, I'm going to pause the recording right here, and let's wait for it to build the application.

So, it's built our application for us, but the map isn't visible. For example, if I click on different things here, for example, if I click on "church," it's going to show me all of the churches in London. So, the functionality is working. Now, if I click on "palace," it's going to show me all the palaces, like Buckingham Palace, and I can deselect things, I can select things. So, that's working pretty fine, but the main thing, the map that we wanted to see, is not visible. So, I'm going to tell that to the AI, and the AI is going to fix that for me. So, first, what I'm going to do is I'm going to tell it exactly what I see. So, I see on the right-hand side that you have created the thing where I can choose to get information about a particular landmark, but I do not see any map. It is all white. All I see is a Mapbox logo on the bottom right, bottom left, sorry. Bottom left corner. Fix that.

All right, so we've basically, in completely natural language, told the AI the error that we were seeing, and now the AI is going to go through the code again. It's going to reconsider everything that it's built, and as you can see, it's saying that it has seen the issue: "The map is not rendering properly. And based on the console logs, there's an error with the Mapbox authentication token. The current token appears to be invalid. Let me fix that by updating the map component to include a prompt for you to enter a valid Mapbox token." So, I don't think that's exactly what we want, but again, we can reiterate again and again. So, I think this time it's going to ask us, ask for us to enter a Mapbox code token, but that's not what we want either. We want it to display that without us entering any token at all. So, let's just wait for that to write and fix, and let's get back to it.

So, after reiterating twice, it has finally built a working application for me where I can see a variety of different landmarks in London with their respective images as well. So, this is pretty cool stuff, and we basically have everything that we wanted. So, I'm going to tell you exactly what I've done. So, right over here, you remember we typed this for error fixation, and then it gave us this, and then I said, "Do it in a way where I don't have to enter anything, but it still works, and don't use Mapbox, I guess." So, it basically created a custom one for us, and this is not really necessary. It's built it for us, and we can see all of the different landmarks here. So, I click on this, it shows me an image of that, and it also describes it in detail, and there's an option to read more on Wikipedia. I can click on Big Ben, Buckingham Palace, the British Museum, and it shows us the location of all of the landmarks. Now, in case this does not look too great for you, all you have to do is go over here again to the AI and just tell it again, uh, to add maybe a better design in the background or do a lot of things like that. But we're not going to waste a lot of time on that. We have a functioning application, and that's all we need for right now.

Now, another thing I want to show you is how you can view the code. So, right over here, I click on "View Code," and as you can see, you can see all of the code over here. So, in case you're interested in all of the code that the AI has written, all you have to do is click on "View Code," and you can also use this to save your application. So, you can copy this code by clicking on a, sorry, "a" over here. You can copy this code and you can paste it inside your own code editor, and you can save that that way as well. So, there's a lot of cool things that you can do over here.

So, now that we're done with a basic layout for our Google Maps, or our London Landmarks application, let's move on to our next application. Now, let's build a music player inspired by Spotify. So, we want to create a homepage for a music player. Now, the music player should have different playlists, different songs, and images for each song, and we want it to be very aesthetically good-looking. So, let's create that. So, I'm going to write over here, let's say, "Build a very good-looking music player inspired by Spotify." And obviously, since my favorite color scheme is red and black, I'm going to go with that, but you can go with any other color scheme. And in fact, if you want to retain the Spotify color scheme, you can go with black and green. So, "Use the black and red color scheme." All right. And then, let's tell it to use images from Wikipedia for each song so that everything looks good. "Create a home page for the music site as well." All right. And let's see where this goes. So, I'm going to hit enter, and let's see what it builds for us.

So, on the top left, you can see the name that it's given us. It's saying "Crimson Rhythmscape," which is pretty cool. Crimson for the color, rhythm for the music. So, let's see what the AI says. "I'd love to create a beautiful Spotify-inspired music player with a sleek black and red color scheme for you. Let's build something visually stunning that has both home and player pages." So, something that I really love about the AI is it actually understands what we're saying and it actually builds upon that. For example, it's saying, "I'm drawing from Spotify's clean interface with its dark theme and excellent visual hierarchy, but incorporating striking red accents to create a bold, distinctive look." So, in my prompt, I very lightly mentioned that we want to inspire it from Spotify, but use red and black color schemes, and it's actually building a lot on top of that. So, it understands exactly what's going on inside my mind while I'm writing the prompt, which is actually really impressive. The way it can extract so much from a simple prompt is very, very cool. Our navigation, album artwork from Wikipedia for visual appeal, and it's also mentioning the color palette it's going to use, and it's saying, "For animations, I'll add subtle hover transitions and smooth loading states to enhance the premium feel." So, this is sounding like a very high-level, advanced, good-looking, aesthetic music player, and I'm really excited to see what it looks like. So, I'm going to pause the recording, and we'll be back when our AI has built our music.

So, it's built this for us. So, this looks very, very nice. It looks exactly like Spotify, and we can see that it's using some really great images. So, we can see Michael Jackson over here, and we can see a lot of music. There's, um, "Billie Jean" by Michael Jackson, "Bohemian Rhapsody" by Queen, and "Smells Like Teen Spirit" by Nirvana, and there's a lot of different genres over here. So, it's built a very nice, good-looking music player. So, as you can see, there's a very good hover effect, and it's actually very accurate. I mean, this is a very high-level website considering all the detail that's here. There's some images that obviously aren't accessible due to various reasons, and we're not going to get into too much detail for that. So, anyways, if I click on this, all right, it's giving us an error. So, let's, let's fix that. So, let's say, "When I click on a particular song, it gives me the error 'Oops, page not found.' Fix that so that when I click on a song, it opens up a music player with a bar that moves forward as the song plays." So, in case you all aren't aware, when we play music, obviously there's a bar that moves forward as the song moves forward as well. So, I'm basically saying that when I click on a song, instead of seeing this page, I want to see that bar within a music player. So, let's hit enter, and let's wait for it to do this for us.

So, Lovable AI is now going to process our request, and then it's going to come up with an output for us as well. So, let's wait to see what it says. And even if this doesn't work, all we have to do is just reiterate again and again. But even the first iteration of the music player was very, very good. It was looking exactly like Spotify, and Spotify itself is a very high-level application. So, that was pretty cool. And by now, you've probably realized that Lovable AI is great in making the user interface. The UIs that it creates are very, very good-looking and very impressive. So, anyways, now we have a response from Lovable AI. "I'll fix the issue that's causing the 404 error when clicking on a playlist. Looking at the console logs, there's an error about accessing a non-existent route 'playlist/2'. This suggests we need to add a proper route for playlist." So, now it's going to write the playlist.tsx file. So, if I click on this, let's see what happens. So, it's showing us all of the code that it's actually writing side by side. So, this is really cool, and what it basically does. All right.

So, now this looks even better. I mean, we can see a particular playlist. It shows the duration for each song, and if I click on play, it actually opens up the player. So, this is really, really impressive. We have a fully functioning music player now. So, we can actually add audio to this and just reiterate and do a lot of fun and cool things, but this is great. So, as you can see, this is moving forward, and this looks exactly like a perfect music player. So, I'm really impressed by this. I mean, in just two iterations, it has created such a good-looking and accurate music player. And if, if we want to make it even better, we can add these images. We can say that use images from different sources. Right now, it's just using images from Wikipedia. So, this is really good. I'm pretty impressed. As you can see, this is moving forward. I can pause, I can move on to other songs, I can do everything that we can do. I can shuffle the playlist, I can go to a lot of different places. So, this is very, very cool. So, we've created a successful music player in, uh, Lovable AI that looks exactly like Spotify, and that was very, very fun as well.

So, before moving forward with building even more advanced applications, let's take a minute to study the Lovable AI documentation. So, I'll leave the link for this documentation in the description, and I'll be explaining this and I'll be reading it out as I move forward. All right, so this is the Lovable AI documentation. So, let's see what it has to say. "Lovable is an AI-powered platform that enables users of any skill level to create full-stack web applications without requiring coding expertise by simply describing what they want in plain English." That's exactly what we've been doing until now. Whether that's our SpaceX application, our London Landmarks application, or our Spotify music player, all three prompts were completely simple, plain English, and completely natural language that we used to describe what we want to build. So, that's completely true. "Instead of hiring developers, users like us can generate web apps or websites instantly, taking us from an idea to an app as fast as possible." So, we had an idea for a space exploration website, a London landmarks website, and a music player app, and it was able to create all of them in a few minutes. So, directly from an idea to an app.

So, let's move on to the next thing: the product capabilities. "The platform provides all the tools you need to create amazing websites, front-end applications, as well as full-stack web applications from one browser tab. No installation required. Lovable includes AI coding tools, real-time collaboration, and project sharing to give you a head start on your app creation journey." So, there's a lot of stuff over here that you can read through. Again, I'll leave the link for this documentation in the description. So, this is basically an introduction on how to build using Lovable, and we're not going to get into detail for that, but this is basically a tutorial, which this is as well, and a custom domain. If you want to add your own domain to a Lovable site app, how to deploy. A lot of people are quite curious on how to deploy using Lovable AI. So, this is exactly how to do that deployment of your apps that you create on Lovable AI. Head over to this section right over here, and that is going to explain everything in a lot of detail on how to deploy applications using Lovable.

All right, so this is the best practices on the best tips and tricks for using Lovable AI. And then this is what is Lovable. We've also covered this. Typically, you must install programs, languages, and packages to build apps. However, on Lovable, you can rely completely on AI to configure your environment so that you can start building without coding experience. So, this is all of that, and we don't really need to cover anything else. This is just some very basic documentation about what Lovable is. So, let's move on to the frequently asked questions about Lovable. So, "How should I structure my prompts for the best results?" We're going to get into prompt writing in detail later on in the course, but for now, let's just see something very small, just for a vague idea. So, "Be clear and specific. Avoid vague instructions and describe expected outcomes to guide the AI in the right direction." We've been doing that naturally for now, and we're going to do it in a much more structured way as we move forward.

All right, so this is all pretty cool. "Can I edit the generated code?" Yes, but full code editing is available on certain paid plans. You can choose any plan that you want, but for this course, we're going to be using the free plan. All right, so this is all of that, and you can import your designs from Figma to Lovable. You can add animations to your project by just adding this into the prompt, and there's a lot of, uh, questions that you might be interested in. Again, I'll leave this link in the description as well, and it's pretty cool to look at all of these questions because usually we have a lot of the same ones as well.

Now, let's build a 3D model using AI. The real magic of vibe coding is when it's much easier to build something through AI than it was earlier through manual coding. And 3D models are something like that. It's very difficult to create a very high-level 3D model, especially when it comes to displaying products in 3D. But now we're going to create that using Lovable AI. So, let's get started. So, we're going to enter in our prompt. It's going to be a very short and simple two-line prompt, and let's see where the AI takes us. So, let's write something like, "A 3D product viewer." All right, so it's going to be basically any product to be viewed in 3D. We want that. So, "A 3D product viewer using React-N3 and hyphen fiber." All right. And then, let's just say, "Add a sample model so that we can actually see how it works." All right, perfect. So, that's our prompt. Let's hit enter, and it's going to open up our AI window.

So, it's named it "Model Explorer Fiber," and let's see what it does from here on out. So, it's spinning up the preview, and side by side, it's going to start coding. But before coding, it's going to present us with a plan, and the plan is basically exactly what it's going to follow through on. So, it's saying that, "I'm excited to build a 3D product viewer using React 3 Fiber. This evokes sleek e-commerce experiences like those on Apple's website or high-end furniture stores, where users can interact with photorealistic 3D models." So, if you look at any really good store like Apple, or you go to Amazon, sometimes you can see 3D models of different products available on the site. So, that's really cool, and that's exactly what this is going to be building. So, "For this first version, I'll implement a clean, minimalist interface with a 3D model as the centerpiece, camera controls for rotating, zooming, and panning around the model." So, we want to be able to maneuver around the model to view different angles, to view the model in different ways, and do a lot of cool stuff. And then, "ambient and directional lighting for realistic rendering, a simple UI with controls for manipulating the view, and a sample 3D model to showcase the functionality."

So, it's done, and it's saying, "I've created the model, and now you can rotate the model by clicking and dragging, and zoom in and out with the mouse wheel." So, we're going to try that, and it's going to show us the model on the right, and let's see how it looks. All right, so we're going to click on this "try to fix" button right over here because an error popped up. So, it automatically takes the error in and it pastes it into the AI, and the AI is now going to process that error and fix it on its own. So, unlike other vibe coding agents, in this agent, all you have to do is tell the AI to fix, uh, fix the error. In other agents, you actually have to take the error and interpret the error and convey that error to the AI. But in this one, all you have to do is say, "Fix the error," and it does that automatically. It identifies the error by itself and it fixes it by itself. So, that's very, very cool, and it's something that's very useful for very efficient debugging. So, whatever this error was, we don't even need to get into it. It was some error, right? We can see over here, there's some error here, and we don't really need to get into it because the AI is going to solve it for us. So, "For the code present, I get the error below. Please think step by step in order to resolve it." And wow, so it's ready, and it's created our 3D product viewer, and this looks very, very nice. I mean, this is actually very cool.

So, let's see how this works. So, we can use the mouse to rotate it, and wow, this is cool. So, I can rotate it left, I can rotate it right, and can we do up and down? Yes, we can do up and down. Wow, this is super cool. The fact that we've built this through AI in less than two or three minutes is really, really impressive. I mean, I am super impressed with this. So, I can zoom out, zoom in. All right, those features aren't working. Oh, no, they are working. All right, and I can scroll to zoom in and zoom out, and this is really, really impressive. Like, I can spin this, I can do a lot of cool things. So, this is completely controllable by my mouse and by my scrolling, and that's really, really cool. So, in just literally three or four minutes, it's built something this advanced. And imagine how long it would take to build through our actual manual coding. So, we can actually even look at the code that it's written. So, this looks like pretty simple code, and this is the code that it's written. So, it's actually pretty nice, and this is just one of the multiple files, but it's, it's a pretty cool model. So, I'm pretty impressed with what this has created. So, this is a 3D model. Now, you can go on to create a variety of other 3D models. If you have designs on Blender for 3D models, you can import them over here, or if you're creating an e-commerce website or any sort of website where you want to display something in 3D, for example, even our SpaceX website, if we wanted to display a rocket in 3D, it's not that hard. We just have to change the design from the ring that it currently was to anything that we want it to be later on. So, that was pretty cool. That was a very fun application with AI.

Now, moving on to more advanced applications, let's build an Instagram clone using this AI. So, Instagram is basically a social media website, and when you open up Instagram, the first thing you see is a social media feed with posts, likes, comments, and stories. So, let's tell our AI to build exactly that for us. So, we're going to tell Lovable AI to build something like that, and let's see where it goes. For now, let's just create the user interface, and we can work on the back end if we want to later, but the most important part is the UI. All right, so let's write, "Create a social media feed with posts, likes, comments, and infinite scroll." So, we want it to keep on just, we can keep on scrolling through posts so that we can, uh, make it as an Instagram clone. All right. And then, let's just say, "Include a stories feature at the top like Instagram." All right, cool. And let's just say, "Just the UI first. I'll add Superbase. We'll, I'll explain what that is later, but for now, you can just understand that it's for the back end. I'll add Superbase for the back end later." Backend later. So, this is again a very simple prompt, and when I hit enter, we expect it to build something like Instagram for us. So, I'm going to hit enter, and let's see what it does.

All right, so "Vibe Stream UI," and let's see how this goes forward. So, the AI is now processing our request, then it's going to come up with a plan, and after the AI comes up with a plan, it's going to start actually building it. So, let's look at the plan that it's presented. "I love the idea of creating an Instagram-inspired social media feed. This will be a visually appealing UI with posts, likes, comments, and stories at the top. Let's create a beautiful, modern interface that mimics the popular social media experience. For design inspiration, I'll draw from Instagram's clean aesthetic with a purple accent color scheme to give it a unique touch." So, Instagram's purple accent color scheme is actually very, very beautiful and very attractive, and this is exactly what the AI has picked up on, and the AI is going to be mapping that from Instagram onto our application as well. So, "The UI will be fully responsive and feature smooth animations for a polished feel." So, it's going to have animations as well, at two. So, we don't need to go into detail for that, but as you can see, it has the design plan, design planned out as well. So, here you can see all of the code that it's writing. If you want to click on that, we can actually see all of the code that it's writing side by side, and yeah, that's pretty cool. So, we're going to wait for it to build the entire application. It may take a while, but we can actually see what it's coding. That's my favorite part about building applications with Lovable AI: you can actually see exactly what the AI is doing, and that's a great way to learn to code. If you're not really a great coder, you can actually learn to code slowly by just looking at what the AI is coding while it's coding it. So, that's a really, really cool thing.

All right, so let's just wait for the AI to do its thing, and we'll be back when our application is ready. Okay, so as you can see, the app is now ready, and it's saying that, "I've created a beautiful Instagram-inspired social media feed with stories at the top and scrollable posts below, complete with like, comment, and save functionality." So, let's see what the app is like. So, there is infinite scroll, and wow, this is exactly like Instagram. This is pretty, pretty cool. And wow, there's actually even a coding post over here. This is really, really impressive. I'm surprised. This is all raw code. So, you can actually take this code, paste it into your code editor, and get the same application. That is really impressive. So, now, in case you're planning on being an Instagram competitor or starting your own social media platform, that's how quickly you can code that using AI. Now, we can add backend to this. We can add better designs. Like, this image is missing. We can get it to fix that image as well. We can do a lot of cool things by reiterating. And "no more posts to load" is bad since we asked for infinite scrolling, so it should work. We can reiterate on that as well. But for now, this actually looks really nice. Uh, these buttons are not, uh, working, but that's fine, cuz we have what we wanted.

Now, in case you guys are interested in furthering this application, you can obviously just tell the agent what you want to work on. If you want to connect Superbase for a backend, you can do that, or you can work on the infinite scroll thing. All you have to do is just tell it in plain English what you're trying to fix. So, let's just give an example on what you guys can do. So, for example, if you're not happy with how the, it's not scrolling infinitely, you can say to it that, "I asked for infinite scroll, however, after a few posts, it isn't scrolling and it is giving me the message 'no more posts to load.'" Right? So, you can write that and hit enter, and obviously, and just write, "Fix it." And then it's obviously just going to fix it instantaneously. That is pretty cool. If you want to say, "The first image is not visible," so you can say, "The first post image is not visible. Fix it." You can write that and hit enter. It's going to fix this thing right over here. If you want to say, "Make the buttons in the in the top right responsive and responding," you can say that as well. "Make the buttons work in the top right corner." Top right corner. You do that and you hit enter. That is going to work as well. So, there's a lot of different things that you can play around with, and this actually looks really cool. So, if I click on this, it actually moves forward, just like Instagram. So, that is very, very impressive. The fact that it's created its own names, its own display pictures, profile pictures, and everything is very, very cool. You can see all of this, and it actually has comments here as well. So, I can like a post, and when I like a post, it actually adds on to the number of likes. So, you can see the depth and the detail that the AI has created. It's not just some random application. Like, I click on like, and it actually increases the number of likes. It turns red. It is a very thorough application that the AI has created in just one or two minutes. So, that is very, very impressive. We can see the comments over here. We can see the comments over here. We can see the comments over here. We can change everything. It's all up to us. So, that's very, very cool. So, if you guys have any issues or any ideas, because this is a very cool application, so I'm sure a lot of you might want to expand on it. I'd encourage you to reiterate on this application, find things that you like to do, find things that you like to make on it, and actually take it further, because it's a great way to practice. This is one of the most advanced applications if you take it further. So, there's a search bar over here. You can make that functional in a much better way. You can do a lot of other things. You can design a logo over here. You can ask the AI to design a logo over here. Use some images. So, this is very cool.

So, now let's move on to other things. This is a very cool application, and I'm actually very proud of Lovable AI for being able to build this. Now, let's build an e-commerce store using this AI. So, if we want to build an e-commerce store using Lovable AI, we need to mention that in the prompt. So, let's write a prompt for that. Now, it's going to look a lot like Amazon and other e-commerce platforms that you might see. So, we're going to try and build something like that. All right, so let's say, "Create a minimal e-commerce store with product catalog, cart, and checkout and order tracking." All right, cart, checkout, order tracking, all the basic features that you would want in an e-commerce website. And for now, let's just have just the UI, so just the UI for now. "Make it look super good and use Wikipedia to fetch images." All right, so I'm going to hit enter, and let's wait for our Lovable AI to build this application for us. So, it's going to build this e-commerce store, and as we're nearing the end of our application building spree, you've probably gotten a hang of how to build any application that you want using AI. So, now after this, we're going to cover some basics on how to write the best prompt possible, and then we're going to move on to just teaching you the very basic idea of how to deploy your applications that you build on Lovable AI. So, as we're done with that, we're going to move forward and near the end of the course.

All right, so it's just telling us all the features: a product catalog, which is going to be the main focus, a cart functionality, checkout flow, order tracking. And for the design inspiration: clean, minimalist aesthetic, lots of white space, smooth animations for cart interactions, subtle shadows, designs, features. So, it's laying out the entire plan, like the AI always does. So, that's the best part about the AI: it has a structure, unlike us, where we most of the times will start scing coding from scratch and we won't know exactly in which direction we're going, but the AI has everything laid out and it moves particularly in that direction. So, we can see how it's coding, what it's coding, it's moving pretty fast, it's writing a lot of impressive code, and it's going to build our e-commerce store for us just like that. So, if you want, you can open up your code editor, like Visual Studio Code or whatever code editor you use, and you can actually try and run these files within there, and it will obviously work.

All right, so now it's done with the app. If there's any error, we'll just reiterate, and if there's not, then we'll see how the application looks and works. All right, so let's just see what it does. All right, so "I've created a beautiful minimal e-commerce UI with the following features: clean product [Music] catalog." All right, this looks nice, but most of the images aren't visible. So, let's say that, and let's say, "Add some more colors." All right, so "most of the images aren't visible. Also, add some colors and gradients to the page to make it look visually pleasing." All right, cool. So, that's what I've written over here. And throughout the course, you might have heard the term Superbase a lot of times. Superbase is a simple way to add other types of features without complex, uh, technical setup. So, for example, if you want to add the backend, which is very complex, you don't need to code all of it. You can do it through Superbase. If you guys are interested, you can comment down below if you guys are interested in a separate tutorial on Superbase. I'll be sure to release that very soon if you guys are into that. Anyway, so looking at your issue with images and the request for visual improvements, I'll update the product cards and add some attractive colors and gradients to enhance the overall look of your e-commerce store.

So, we had a problem instantly, and we told it to the AI, and the AI is now going to fix that for us. So, it actually goes back into the code to find out where it can, uh, fix everything that we want it to fix, and that's also very cool. So, if it was a manual programmer, he or she would have to identify where that was and then go in there and figure out what to add in and what to remove, whereas this AI does not need to do that. Well, these images still aren't visible, but the color is a little bit better. Only this image is visible, this blue t-shirt. I want all of these other images to be visible as well. Still, only one image is visible, the others are not. "Fix it by fetching the images another way." Hit enter, and it should work.

All right, so it's processed our error, and now it's going to update the image fetching approach. "Looking at the current code, most of the images are from Wikipedia Commons, but they're not loading correctly. I'll modify the product data to use more reliable image sources." So, now it's replaced, and wow, so we have a perfectly ready e-commerce store for us, and this looks really, really nice. So, this is very impressive. We have all of these different. We have this, this leather backpack, classic white sneakers, smartwatch, wireless headphones, and all the images are actually accurate. So, this is very good. "Style Store: Premium fashion for everyone." So, this is actually a pretty nice website. So, in just a few minutes, it's coded such an awesome project. The website is completely responsive, as you can see. So, we can use it on a variety of different applications. So, that's very cool, and this is stuff that it would take a manual developer a while to code, especially with all the images and all of these hover effects. So, I'm pretty impressed with what the AI has done. I remember I used to build e-commerce projects a long time ago, and they're pretty useful for building your portfolio. So, the fact that the AI can do it in such a precise manner is actually very impressive.

So, now that we're done with our last application, let's start moving on to some of the more advanced theory behind Lovable AI and what you

can do to enhance your vibe coding experience with lovable AI. So this is it. If you guys want to enhance this program, you can obviously just keep reiterating, add features, maybe make the design better, change the color of the background, add more products, add infinite scroll, add infinite items. A lot of stuff you can do. You can build on this feature, your cart right now. I haven't uh added on to the your cart feature, but you guys can feel free to do that.

So if I click on add to cart, this is now in our cart. So this is actually a very cool website. You know, we have this and I can add it again, and that basically increases the quantity right over here. And you can actually see the math that it's doing. It's actually calculating my total order and that's completely accurate. So I can add this, so it should increase by $200. And as you can see, it is increased by $200. So I can add another and it's going to be around $700 now. Perfect. So it's actually a very high-level, good-looking website. So I'm pretty proud of Lovable AI again for building this. This is all very cool, nice hover effects and a nice website. And now we're ready to move on to our next thing.

All right, so the team at Lovable has been very kind to put out a prompting guide for all of the users. Now, this prompting guide contains everything about how to write a good prompt and it actually is from the first principles. So it'll teach you how an AI thinks and why you should prompt a certain way to fit into the AI's mentality and produce the best output for yourself and make sure that the AI grasps everything inside your prompt. So it's a very, very put together guide that I actually really enjoyed. I'll leave this link in the description if you want to check out the prompting guide. I'm not going to go over all of it. As you can see, it is very long. These are all the sections of the prompting guide and you can see how we have this over here, how to use the prompting in the Lovable's builder. But before that, all of it is prompting. So you can see like prompting in different languages and a lot of different things, using image prompts, which is actually really fun. If you want to upload an image and then add an example prompt like, "Create and implement a UI that looks as similar as possible to the image that I've attached." So for example, if you want to build a website like Instagram, like we did, you can attach an image of Instagram and then say, "Create a UI that looks like this image." So that's how you use images and prompting.

So there's a lot of different techniques over here and, you know, be specific, avoid vagueness, avoid ambiguity. You want to be as clear as possible and give a clear direction on scope and expected outcome. So for example, "Make this app better," "Create a form for user input." So you want to be very specific to the UI and, sorry, to the AI as to what exactly you want. So I have a very bad habit of doing things like this, writing, "Make this app better," because I like being personal with the AI. But for the best results, you want to be very specific.

Now, you can also use terms like this when you're not exactly certain as to what you want to do. For example, if you're not sure what to do to make the app better and you don't know if you have to create a forum for user input or not, then you can write, "Make this app better," and leave it to the AI to do what it deems best. But it's best to be specific so that you can actually lead the AI in the right direction rather than the AI leading you, right? So there's a lot of other prompting techniques over here. Start with a solid knowledge base before you even write a prompt. Set up your project's knowledge base in Lovable's project settings. So knowledge base is something that we haven't really gone into in detail, but it's a very important thing. So you can read this and understand how to use it.

And this is all pretty normal. Mind your tone and courtesy. While it doesn't change functionality, a polite tone can sometimes yield better results. And this is something I have experienced personally. Being polite and very simple and gentle with an AI always leads to better results. So phrases like "please" or "respectful ask" can add context and make the prompt a little bit more descriptive, which can help the AI. For example, "Please refrain from modifying the homepage, focus only on the dashboard component." This reads as polite and it explicitly tells the AI what not to do. It's not about the AI's feelings, it's about packing in detail. Plus, it never hurts to be nice and it's always good to be kind, even if to an artificial intelligence.

All right, so that's that. And we've already gone through this. This is additional prompting tips. So I would really, really recommend that you go through all of this because I did that and it has helped me a lot. Not just in using Lovable AI, but even in using, uh, more common AIs like ChatGPT and Deepseek and a lot of other AI models that I use. Prompting is a skill that is definitely going to help you in this new age of AI. So this guide by Lovable and their team is actually very, very good. So I would recommend that you go through the Lovable AI guide on prompting to understand how to communicate with AIs, especially these agent AIs, agentic AIs that produce outputs. And that's why you want to write the best prompts possible.

So that's pretty cool. Um, if there's anything, the four levels of prompting, you can watch this video. You can understand all the different four levels: structured, training wheels, prompting, and then conversational prompting. And then meta prompting. And this is an advanced technique where you can literally ask the AI to help you improve your prompter plan. This is the most fun part because you actually get to see the AI's innovation and the AI's own ideas, which is actually really cool. So since Lovable AI, like ChatGPT, can reason about language, you can use it to refine your instructions. This is especially useful if you get an output that's off base. It could be a sign your prompt was unclear. So this is all very cool.

And then there's reverse metaprompting, which is also very cool. It basically means you're using the AI to summarize or document what happened after a task so you can learn or reuse it later. That's also very cool. But this is as you move forward and get more advanced and you want to save your ideas and the ways you've done particular things using the AI so that's that. You can look at the core prompting principles. This is something I would really recommend. For example, the first principle is thinking in physics for prompting. This is that. So you want to be very thorough with this part. Uh, you want to be concise, you want to be logical, you want to be explicit, adaptive, reflective. And as long as you do all of these things, your prompt will obviously be good. You just have to focus on this and everything else will fall in place. So focus on being concise, logical, explicit, uh, adaptive, and reflective. And the acronym for that is CLEAR: the CLEAR framework: concise, logical, explicit, adaptive, and reflective. That's that. And structure matters. Know the model's limits. So this uses Sonnet 3.7, but later on, if it updates to newer, better models, which it definitely will, you should know what the model is capable of. So if you're into the field of AI, you would obviously know that. If not, you don't really have to worry about that, but you should always keep into consideration that the AI also has limits, at least for now. So structure matters, order and emphasis. You don't want to start off with something that's completely irrelevant and then end with the most relevant thing. You want to have a particular structure and a particular order. So you can read all of this as well.

And yeah, so I'm not going to go over all of this, but this is basically something that is very important and it's the best way that you can create the best applications. So if your goal is to be able to build really high-level and the best applications that you want through Lovable AI, you definitely need to read this prompting documentation at least once. You can skim through it and understand what it's saying because that will actually empower you to be able to communicate the ideas in your mind to Lovable AI so that it can convert those ideas into full-fledged applications.

Now, for the last part of the course, we're going to learn how to deploy the apps that we build through Lovable AI to share them with the world. So learn how to deploy your web applications with Lovable. Once your web app is ready, you can deploy it and share it with the world. I'll leave this link for the deployment instructions in the description if you want to check it out yourself. You also have the option to share a work-in-progress version to gather feedback before going live. Lovable makes it simple to publish, iterate, and distribute your applications with just a few clicks. Your published app will be accessible to anyone with a link. Make sure you're ready to share before publishing. So that's really cool about Lovable. The apps that you build, you can actually publish them. That's pretty cool. And I really recommend that you head over to this link yourself to understand the entire process. I'm just going to be skimming over it so that you guys get a basic idea.

So publishing your app. When your project is ready, publish it to generate a sharable URL, and then you can share that URL to showcase your applications with collaborators, stakeholders, or basically anyone who you want to show your app to. So there's a whole video over here by the Lovable team and you can watch that as well. And then there's how to publish your app. So in the top right corner of the editor view, click the publish button. Um, if you move further back in the tutorial, you can obviously see the publish button while we're building the editor, sorry, in the editor view. And this is all of the instruction for how to edit. So just eight steps at max. And through those eight steps, this is the best way to do it.

So if you would like to connect to a custom domain, this is the best way to do it. There's a link right over here. You can click on that and it takes you to this custom domain. So if you want your own domain and your own URL, you can do that as well, but it requires a paid Lovable plan. So you might want to be ready for that. Otherwise, you can obviously just host it on a sharable URL. So we'll leave all of these links in the description for you to check out the deployment process. But it's very simple. Uh, once you go click on the publish button, it starts the deployment process. And during this time, the button is going to display publishing. And once the deployment is complete, you'll see an update button for future updates. So your application is now live and you can access it via the provided link. So it's going to give you a link and you can access your application through that link, and so can anybody else.

Previewing is very handy, as it allows you and others to view the latest changes without affecting the live published version of your application. So if you want to add, make changes to your app without showing it to the world, that's where previewing helps you out. So previewing allows you to see your latest changes without affecting the live published version.

One more thing that I get asked a lot is how to make money using the skill of knowing how to operate Lovable AI, and that's what I'm going to be going over in this video. So basically, this is the process of Lovable AI, right? We describe what we want to build, it creates it for us, we improve it by asking for changes, and then eventually we publish the project. So where's the gap here? Where's the gap in the economy where you can utilize that and exploit that gap to make money? Well, the gap lies in time. For example, if somebody is hiring a developer, a manual developer, to build an application or a website, that manual developer would have to spend a lot more time than you would. According to Lovable, what they would build in 20 hours, you can build in 1 hour using Lovable AI. And that really is true. Throughout the course, we've seen a lot of different applications that are very complex, and we've built them in five or 10 minutes max. So that's exactly what you want to do. You want to find clients who are willing to pay developers, and there's loads of them. You can find them on freelancing sites like Freelancer, Upwork, Fiverr. And on those sites, you'll understand that these people are willing to pay money for applications and websites to be developed. But manual developers have to take a lot of time because they have to write the code from scratch and they have to build everything and debug everything themselves. But since you have Lovable AI with you, you don't really have to do all of that. The AI can do that for you, and you just have to guide the AI in the direction the client wants you to. So that's how exactly you can make money. That's a gap here. There's more time that, uh, you have on your hands because you're building it faster. So you can actually work for multiple clients in the time that a manual developer would only be able to finish something for one. So that's how you can get ahead of a lot of developers if you're using Lovable AI. So that's one of the things.

Now, if we move forward, obviously you own the code. Everything that Lovable builds is yours. So you can also build your own applications if you have real business ideas. I've heard a lot of stories of people who have built apps using Lovable AI or other vibe coding agents and created very successful applications. So it's possible for you to do that as well. You can, everything you build is completely yours. You own the rights to it. So it's completely free and you can do that as well.

Now, obviously, we've gone through all of this. There are all of these benefits to using Lovable AI. It's instant and intuitive, beautiful design, supports any backend, GitHub integration. If you like publishing your code to open source, you can do that as well. You can do a lot of different things over here. So now this is a lot of, uh, information over here. So if you're a designer and you want to improve your design efficiency, you don't want tedious prototyping, then you can bring your design ideas to life without tedious prototyping work in tools like Figma by using Lovable AI. So especially for a lot of designers who work in video creation and 3D models, we've created a 3D model in this video, in this course. And if you want to create a video, you can actually also mention that to Lovable AI. I've tried it out and it does work. Um, you have to mention that you want to use a software called Remotion. I can create a separate video on video development using Lovable AI if you guys are interested in that as well.

And founders and solopreneurs, iterate and validate in minutes. Launch a full product in less than a day. Sorry, launch a full product in less than a day. So if you have any idea that you want to convert into an app, you can do that in very short time periods through Lovable AI by just telling the AI your exact ideas, as we've done throughout the course. Whatever's in your mind, you want to speak your mind and explain that to the AI, and the AI will build that for you seamlessly.

Now, human software engineers ship an entire front end in one prompt to let Lovable fix bugs and do your UI edits. Now, there's a lot of people who pay to get their codes improved, more efficient, and they want to debug their codes, find errors in their code. And that's exactly where you can make money as well. You can use Lovable AI to do that work and give them the refined code or the solved code, the code without errors, or identified errors, or comments, whatever they need. Lovable AI can do that for you. It's a very powerful coding technology that I really recommend you try to use in as many ways as you can.

And there's product teams. Empower non-technical team members to code. For example, if you run a team or even if yourself, you're not really interested in coding, but you want to build real prototypes, which is obviously very necessary if you're starting a business or doing great work, then you can use Lovable AI to build those prototypes. You can build things that you can see, experience, and, uh, interact with in real time without having to hire a developer or rely on developers in your team. You don't have to do that. Now, you are an empowered developer through tools like Lovable AI. So that's another way that you can make money using Lovable AI.

Now, moving forward, there's a lot of reviews over here. Um, a lot of beautiful reviews about a lot of people who have used Lovable. Most of these people are actually founders of their own small startups. So it's actually something that you can relate to if you're a business owner. You can use Lovable AI to build your own applications, your own websites. You can even host it by yourself, deploy it by yourself. You don't need to pay a developer for that anymore. Everything is completely available to you for free because of these artificial intelligence tools. So if you want API integration, if you want to create artificial intelligence using artificial intelligence, you can do all of that. It's very, very easy. You just have to enter in your API key and it does that for you.

So as you can see, look at this person right over here. Kate is saying that I can get rid of developers and save thousands of dollars. So if that helps her create more efficient things in less time and costing her less money, then that's great. That's something that Lovable AI has done to save money or make money for that individual. So there's a lot of reviews over here. Um, you can go through this as well if you're interested.

And the free plan includes a lot of different things. So five messages per day, and that's actually a lot. A total limit of 30 messages per month. Within just around 15 to 20 messages, we've created nine to 10 applications. So it's completely up to you on the best ways that you can utilize this. I really recommend that you try different things on freelance websites first, and then you can actually start working with real-time clients who pay you a lot more.

So basically, the whole idea of this is that through Lovable AI, you can do work that earlier only developers could, and you can actually do it better than them. So anything that you can imagine a software developer would be able to do, think of it as now you being able to do that, but 10 times or 20 times better than what they would be able to do. So that's how you can monetize the skill. You can find gaps where developers are lagging behind, developers are slow, and you can do that. Or on the other side, if you want to provide value, uh, by creating your own things, you can use technologies like Lovable AI to build your own products, applications, softwares, and bring your ideas to life. So that's just it. Um, on a lot of my courses, I get questions about how I can monetize this skill or make money from particular skills. That's why I felt like adding this very short section. So yeah, peace out.