Lovable FULL Tutorial - For COMPLETE Beginners (No Experience Needed)

Key Takeaways

In this video, I'll give you a complete tutorial on how to use Lovable. I'll assume that you're a complete beginner, that you're not an expert programmer, and I'll walk you through everything step by step. So, by the end of the video, you know all of the core features, and you're comfortable using this tool to build some really cool applications. Now, I'm going to show you advanced debugging, so what happens if something goes wrong? I'm going to show you advanced features that you probably haven't seen before and how to create both a front end, that's the user interface that you would see and interact with, as well as a backend that can handle some more complex operations like authentication, data, etc. This is going to be super cool. Let's hop onto the computer and get into the tutorial. So, let's start by discussing what Lovable is. Now, this is an AI tool. It's free to use. You don't need to pay for it. You can get some free credits. And this allows you to build full stack web applications using AI. Now, while you can go in and you can modify the code yourself and you can really get as advanced as you want, you don't need to know how to code to use a tool like this. Really, what you do is you write a prompt. So, you just tell this AI model what it is that you want to build and then it can go and build that for you. That's what lovable does. That's the tool and it can build some really cool applications. And if you scroll down on their website, you'll see a bunch of examples of apps that people have built and deployed with Lovable. So, this is a great tool and I'm happy to say that Lovable has actually sponsored this video. And that means that if you do decide to use this more and you want to buy more credits, I have a 20% discount code that you can use that I'll link in the description. So, anytime you buy credits for the next 30 days, that's how long it's valid for, you can use this code and get that discount. That said, it's free. For right now, I'm just going to use the free version of the tools that what I'm using is the same as what you'll be able to use. And I'm going to show you how to create some cool applications using this. Okay, so we're on the Lovable website. In order to get started, that's where you need to go, right? Lovable.dev. I'll leave that link in the description. Like I mentioned, it's free, but you do need to make an account. So, you can just make an account, sign into that, and then you should see the number of credits that you have. Lovable has given me some more for this video, but you'll see that I don't have the pro account, which means there's a few features I don't have access to, but it's fine. We can still use this tool. And again, you'll get more credits every single day. And the way this works is whenever you ask Lovable to do something, it's going to cost a certain number of credits. That'll depend on how complex the task is. If you wanted to build something completely from scratch, that's going to cost a few more credits than if you wanted to change the color of a title or something along those lines. So in terms of getting started with this, the first thing that we need to do is figure out what it is that we want to build. So you need to come up with some kind of idea and I recommend thinking through this pretty carefully. You get the best use of these tools and of lovable when you know what it is that you want. If you're kind of just guessing or you're just trying to make something cool, you can get some great results from this, but it might not be exactly what you want because the more specific you can be, just the better results you're going to get. So in my case, I want to create a kind of fitness tracking application. I'm going to start with something really simple, which is just a macro calculator. So determining the amount of calories, fat, protein that someone should get every single day. And then I'm going to slowly make it more advanced. And I suggest going with an approach like that where you plan out what you want your entire project to look like first. You can do that in like a Google doc or something. and then build it step by step. Rather than giving a super detailed prompt at the beginning and asking it to build a million things, get it to build one feature at a time. And I'm almost sure that you're always going to get a better result doing that. So, with that said, we can come here to this prompt window and I can just write what I want. But there's a few other ways to create a project that I want to quickly make you aware of. So, if you press this plus button here, you'll see that it says import from Figma. Now, if you're a designer and you've used Figma before, then this is great. You can just import a Figma design that you've already built out and you can just have Lovable create the application for you. If you don't know what this is, don't worry, it doesn't apply for you. You also can attach an image. So maybe you sketch something out on your tablet or maybe you have just like an example of a website that you want to build. What you can do is you can press attach and you can add images to the prompt here and tell Lovable to reference those images and to build something that looks like that. So, if you're a good artist, which I am definitely not, you can just draw something out and you can give it to Lovable and it will then copy that. Now, you also have the ability to remix an existing project. So, whether it's a project you've already worked on or a project that you've seen from the community here that you want to build another version of, you can press on this remix button and then you'll create a new project with Lovable based off of this project. So, that's kind of like the template that you're starting with and then you can go crazy and do whatever you want to make any um kind of modifications. In my case, I'm just going to come up with an original prompt. I'm actually going to use my voice to do this because I find the voice dictation. It's just a lot easier for me to give a detailed prompt. And I'm going to do that by simply using this tool called Whisper that I have installed on my computer. You can use anything you want. You don't have to use this. You can use the built-in dictation. What I'm going to do now is just kind of speak out what I want and you'll see the way that I structure my prompt. Please create a simple macro tracking application that eventually I will build into a larger fitness app that allows users to enter their gender, their height, their weight and other thing like their preferences if they want to lose weight, gain weight, maintain their weight, also the amount of calories maybe they burn in a day or their athletic activity and then recommends to them the macros or nutrition they should be getting every day. So, the calories, the fat, the protein, and any other information that you think is valuable. I also suggest that we give them the number of meals that we think they should be eating, especially if they need to get a lot of calories in in that one day. I want this to be really simple. I want it to be easy to use and intuitive. I want the user interface to be clean and easy to navigate, and I'd like to use an orange and black color theme. Keep it simple. Don't do anything too complicated. Let's get a working version first and then later we'll add some more features. Okay, so I've just dictated that now um to the model and you can see that it kind of has written this out for me using this whisper tool which is quite cool. And anyways, I'm going to go ahead and press enter now and we're going to start generating the project. Now again, I'm keeping it simple. I'm building one step at a time. I know I want to add more to this later, but I'm not going to get ahead of myself yet because if I do that, it's going to take a lot longer to get the result and then I'm going to have to do probably a lot more revisions. So, I'm going to keep going over best practices when it comes to prompting here. But, while this is spinning up, I also want to make you aware that Lovable has some really good documentation that talks specifically about prompting best practices. I'm going to link this in the description. You can see it's extremely long. Obviously, I'm not going to go over all of it right now, but it gives you a lot of examples of how to prompt. And if you're really new to using these AI tools, I suggest reading through this because it's going to give you a lot of insight. Now, anyways, I'll cover some of these points, the important ones in this video, but obviously this is a much more in-depth guide than I can give you right here. Okay, so we're back to the lovable interface, and you'll see what's happening right now is that it's kind of thinking through this, and it's actually writing a bunch of code for us. I'm going to start going over the interface and just explaining to you some of the different buttons and features that you see. And as the video progresses, we'll get more and more advanced and you'll learn more about how to use this. So on the left side, this is your kind of interface with lovable. Right? This is where you're going to be working most of the time. And realistically, you're probably just going to be typing prompts here. Prompt is just you telling the model what you want it to do. Right? Now down here, you'll see a bunch of other stuff. For example, you have the ability to add GitHub history knowledge. We'll talk about that later on. Or to attach images. You also have this mode selector. So you'll see where it says chat. And if you toggle this on or off, you can determine whether Lovable is actually going to make a change for you and act like an AI agent, which I'll discuss in a second, or if it's going to respond to you. So right now, we have it in the default mode, which means it's actually going to be able to modify files, write code, and create the project for us. But sometimes we actually just want to ask a question. We don't want it to go make a change. We want clarification, or we want to just talk with Lovable. If that's the case, we enable the chat mode. And then when we start talking, we've kind of turned on the safety where it's not going to automatically go and change something that we didn't want it to change. So, that's an important button right here. We have chat mode or default mode. Okay. Now, Lovables just pinged me here with that kind of uh notification, the audio notification saying that it's kind of completed the first version of my project. And you'll see that we get a live preview popping up on the right hand side of my screen. Now, you'll see that you have the left side, right, which is where you prompt the model. On the right side, you have the preview. So, it's showing you what the finished website looks like. And then up here, you'll see that this acts kind of like our web browser. So, if you want to refresh the page, you can press this refresh button, and it's going to refresh the website that Lovable has created. If you want to pop this out into a new tab, you can press this button right here, and it will open a separate preview. So, you can have it full screen in a different window. If you want to change the page that you're on, you can press right here. You'll see right now we just have one page, which is the homepage or the root page. So slash, which is always the default page of a website. But later as we make this website bigger, we'll have more pages we can navigate to. And then we can toggle this and change it into tablet mode or into um what do you call it? Kind of phone mode and see what it looks like so that we can test kind of the responsiveness of our design and if this will work on a smaller device. Anyways, I want to test this out now and see if it's working because obviously sometimes it can make mistakes. So, let's go here. Let's select our gender, our age. For some reason, it knows like pretty much all of my stats because this is almost exactly correct. Our goal, let's go to gain weight and let's go activity level. We'll say no, lightly active. It's going to calculate our macros. And then you see it gives me my macro targets. So, 28156 84 g recommends four meals per day. And then it says start tracking. That doesn't do anything right now. And then calculate again, which brings me back to the calculator. So, for a first pass, that's really good. And that's pretty much exactly what I wanted. But obviously, we want to add more stuff to this. So, we'll do that in 1 second. Okay. Now, if you're someone who's a little bit more technical here, uh, like me, for example, who's a software engineer, then you may be interested in this button. If you press this button right here, it's going to allow you to view all of the code that Lovable has generated for you. Takes a second, so we just need to wait for it to spin up. But you'll see that we can actually go in here and we can view everything that it's created and we can actually go directly to the code browser and we can start typing and modifying the code. Now, that's a premium feature, which means you need to pay for a lovable subscription or a paid plan in order to access that. In my case, I'm just on the free plan, so I'm not going to touch that right now, but I want to make you aware that you can do that. Okay? So you can export this code, you can modify the code, you can do pretty much whatever you want with this code um as if it was like, you know, a proper coding project. Okay. Also, we have this button right here. This just collapses the left sidebar where you have the kind of lovable prompt window. So if you wanted to just be viewing the code, which maybe if you're more advanced, you want, then you can do that there. Okay. So I'm going to close the code viewer. We're going to go back to the live preview. And what I want to do now is start making some edits. Now, before I go crazy and I prompt this and ask it to do a bunch of other stuff, I want to show you the way that we can edit this because there's a few different methods which are really interesting and I haven't seen in some other AI tools. Okay, so let's say I press this edit button right here. It says select toit. This allows you to actually select the different components on your website and directly make a targeted change to them. So here, for example, we have macro calculator. Maybe I don't really like the um what do you call it? the font that we have here. Maybe I want it to be underlined or something. Well, I can just select it. I can say underline this, okay, in orange. Now, when I do that, Lovable knows the exact um kind of target that it needs to make a change on. So, it's going to be a lot more accurate in the changes that it does make. It's not going to go out there and kind of hallucinate and fix a bunch of stuff that we didn't want. And you can see here that it just changed this and added the underline directly to this component. Now, of course, this doesn't always work. Sometimes, you know, there'll be mistakes and things will go wrong, but you see that we were able to really quickly make that very targeted change, which is a feature I personally love of lovable. Now, at this point, we have two changes, right? So, we did that kind of first big build where we created the whole project and then we did this underline. Now, if for some reason we don't like this underline, we can actually always revert back to a previous change that we made. Now, in order to do that, we can find the uh last kind of change that was made. So we can click on it right here and we can press restore. Now if I press restore, this is just going to bring me back to that state. So anything past that will be removed because it's tracking what it's doing and it will bring me back to that previous state. And you can see now the underline is gone. Okay. And if we wanted to, we can actually restore forward. So now because we removed that state, I can go back here and I can restore the new state and it will bring me back to that that point in time essentially. Okay. And then if I wanted to see the code that was actually changed, um, then you can press on code and you can actually see what's called a diff. A diff just tells you where something was changed. So in this case, we see the red, so that was removed. And then the green was added. Again, it's probably not relevant to a lot of you. Uh, but in my case, as a software engineer, that's something that's important to be able to see. Okay. Now, we also have this history button up here. If we press this, we'll see all of the history of our project and the different stages that we've been in. So, we created the macro tracking app. We added the orange underline. We then restored and restored again. And we have all these different changes that are saved. So we can really clearly see kind of the progression of our project. All right. So this is cool. But the next thing I want to do is make a little bit of a larger change. I actually want to add a landing page to my application so that when we come, we don't just see the calculator. We see like a nice um kind of marketing landing page. So let's ask Lovable to do that. Can you please create a stylish landing page for me and name my application Tim's macro app? Yeah, let's go with that. Uh, and give me a kind of cool, nice, modern landing page that convinces people to use my calculator and have one clear button they can press to kind of enter the application or start the app. Now, you'll notice I'm not being super clear in what I'm saying because I don't really know exactly what I want. I'm kind of just coming up with it on the spot. But obviously what we would want to do is have a more detailed plan. Think through this carefully beforehand and then we go step by step. We start with the calculator. We add the landing page. We add the next page, the next page, the next page. And we already know what it is that we want to build. So we're not kind of guessing along the way. So I've just told it, okay, you know, go ahead and do this. Let's see how it does. And then I'm going to show you some more advanced ways that we can prompt this that can give give us some better results um after this change is made. Sweet. So it just finished. And you see that we now have this kind of landing page here. Looks pretty good. It's using my theme somewhat. And I'm just going to zoom out a little bit just so we can see this a little bit more clear. And now you'll notice if we go up here, we have two pages. We have the slash page and the /calc page. Because I told it to make a new page, it knew, okay, the landing page should be on the homepage or the slash page and then calculator should be here. And if I press the /calc page, it will bring me over to this route. So let's wait a second for it to load. And you see the calculator appears. So, let's go back here to the homepage, and I'm going to show you that more advanced way of prompting that I was discussing before. So, what I'm going to do is I'm going to go into chat mode here. Now, let's say that I want to ask Lovable to do something, but I don't know the best way to ask it to do that. What I can do is I can kind of just rant and ramble off my thoughts as I normally do into the uh into Lovable here, and then I can do it in chat mode. And I can tell it at the end of that, you know, kind of thought dump, turn this into a prompt that is good for an AI model, right? Or that works with lovable and will help me, you know, be clear and concise in what I want to say. So, I'm going to give you an example of that. But essentially, if you turn on the chat mode now, lovable is not going to touch your project. It's not going to modify any code. So, you can do what I think is referred to as metaprompting where you prompt the model to help you prompt the model, right? Or in this case, prompt lovable to help you prompt lovable. So, let's say that I want to add a dark mode and a light mode kind of toggle for my website. I might not know how to clearly ask Lovable to do that. So, I'm just going to ask Lovable to help me ask Lovable to do that. Okay, so let's do that. I'm going to say the following. I want to add a dark and light mode toggle feature to my website. I want the user to be able to press a button and either turn it into light or dark mode. I know this requires a lot of changes to my code and it's something that we need to write properly. can you help me come up with a clear, concise, and well-defined prompt that I can pass to an AI model that would be able to make these changes without messing up my project? So, we've asked that and we're in chat mode. Again, make sure this is toggled. You'll know it's toggled if it's blue. We're going to hit enter and then it should give us that new prompt. We're then just going to copy that and pass that to lovable. Okay, cool. So, it says it's going to help us do that. Now, the advantage here as well is that because this has access to our project and the context of our project, it can read through all of the files as you're seeing it doing right now. So, it knows what we're using and kind of the approach it will need to follow in order to do this. So, it says, okay, here's the prompt. So, we have context, we have the current setup, we have the requirements, and we can pass this now, and it will follow this very, you know, detailed kind of process that we've given it. Okay, so let's copy this prompt. All right, let's go up here and copy. Let's take it out of chat mode and let's paste this in and let's see if we get that feature. So, it looks like it finished here. I now have this kind of toggle and it seems to be working pretty well. Let's press this. Let's toggle this. And yeah, the light and dark mode is functioning. The home button works. Okay, sweet. So, there we go. All right. Now, at this point, we've created a basic front end, but I want to go a little bit further and I want to show you how we can add some fancy animations to this because there's actually a pretty cool thing that we can do using this tool called 21st.dev. Okay, or just 21st. Now, I'm not going to get into all of the details of this, but essentially this is a conglomeration of all of the different component libraries that exist out there that already have all of this advanced kind of UI functionality built for you. So, for example, you may have seen those like really cool websites where you have this like, you know, mouse moving thing, right? Or whatever, all these animations. And for you to be able to describe that to lovable is going to be a little bit difficult. So, rather than doing that, you can go to this website, which I'll link in the description, and you can just look for any of these designs that you like, right? So, in my case, I want to find one for kind of like a landing page. So, you know what? Let's try this one. It's going to be interesting if this actually works because this is very complex. But what we're going to do is we're just going to click this design and I'm going to press copy prompt. Now what this does is it gives us a really detailed prompt that describes how to do this that we can then pass to lovable so we can implement this. So now that we've got that prompt, I'm just going to go back to my app and I'm literally just going to paste the prompt in. Now you'll see that it's very long, right? Because it's explaining like exactly what to do with the code sample. But this just says the following. You know, you're given a task to integrate an existing React component in the codebase. And then it says how to do this. I'm going to scroll to the very bottom and I'm just going to make sure that I say do this for the home slash landing page. Now, one thing you should know about prompting is that what you put at the beginning of the prompt and at the end of the prompt always carries more weight than what's in the middle. So if you want the model to do something and you want to be really specific and you want it to have more weight in that instruction, either ask it at the very beginning or at the very end and it will usually take that in more into account essentially. So in this case I asked to do a bunch of stuff but then because at the very end I say do this for the home/landing page. It should know to do that for the homelanding page. So let's try this. I have no idea if this is going to work. In fact if it doesn't work that might actually be good so I can show you kind of how to fix these things. But let's give it a shot and let's see if we can add this animation. This is the component library or you know collection of component libraries that Lovable actually recommends in their documentation which is why I'm showing it to you. And it's really cool if you want to make some really interesting kind of UI elements and components. All right, so this is pretty funny. I mean it's working. It obviously is a little bit ridiculous for this type of application, but you can see that it does work um in the live preview, which I think is pretty cool. And then when I go here, obviously it goes away, which which was intended. So, okay, that's pretty interesting. Um, I'm actually really surprised that worked on the first time, but we got it going. Okay, so that's animations. Next thing we need to talk about is knowledge. Now, this is something that Lovable talks a lot about in the documentation and that I can attest is very important. Now, if you go here to this kind of plus button right here, what you're going to see is a few tabs. You'll see history. We've already gone over that, and you'll see knowledge. Now, what we're going to do is we're going to click into knowledge here. This should open up kind of a settings window for us. So let's wait one second. And this is a place where we're going to be able to put essentially context that will always be included anytime we talk to lovable. So you see the knowledge page here. It gives us some quick kind of context, right? Set project specific rules or best practices. Set coding style preferences. Include external documentation or style guides. Doesn't matter. The point is anything that you don't want to have to keep repeating and that you want lovable to always look at and be aware of, you can put inside of the knowledge. So for example, we can say something like always design each component so it has a light and dark theme and ensure that integrates with the dark and light theme selector that we have in our project. Okay, so that's one rule that I've added. Now it's good for the rules if you do them in kind of point form. Another thing that I'm going to say, always keep everything as simple as possible. Don't over complicate things and make sure the UI is clean and easy to understand. And you can just go through here, right? And you can add as many rules as you want. And if there's something that you want this to always do or always apply, you put it inside of the rules file. So right now we might not have that many rules to add, but as the project gets larger and more complex, we'll start adding more stuff to knowledge so that it always gets read and picked up by lovable. Okay, so we're going to save this here. You also of course can even ask Lovable in chat mode to help you come up with the knowledge file and kind of create this meta knowledge file where you're adjusting it using a lovable. And then of course just because we're in project settings here, you'll see that we have analytics. If we publish the project, then we'll be able to see this. We can give other people access. We can set up different domains. There's also just some general project settings here like renaming the project, remixing it, giving it a category, etc. Let's give it website. You guys get the idea. Okay. And just so you know, when you create these projects and you don't have a paid account, by default, this is public, which mean other people can view what you're building. If you want this to be private, then you do need to upgrade your plan as it says here, right? So, we have workspace or personal. Right now, it's just public. Okay, let's get back into here and let's make some more changes. So, what I want to talk about now is Git and GitHub, which is version control, which I'll explain to you, and then we're going to get into more complex stuff where we're going to set up a backend. We're going to have user accounts, and I'm going to show you how we really can create something quite powerful with lovable. Okay, so Git and GitHub, you've probably heard of this before, but if you haven't, essentially these are tools that we use to save our project consistently and also to allow other people to work on it with us. Now, Lovable makes it very easy to integrate with Git and GitHub and just like lovable stores kind of a history of our project, Git and GitHub will do that as well, but in a little bit more of an advanced way. Git is a local tool, something that runs on your own computer or in this case on our lovable project. GitHub is a place where our project can kind of live and other people can access it and they can view the code that we have. They can make changes to it. I don't want to get too in-d depth, but the point is we kind of need to use this as our project gets larger. I'm going to put a video on screen right now that explains this more in depth in case you're interested, but I'm going to show you how to add kind of an integration to GitHub here so that it automatically gets saved for you. Okay. So, what we're going to do is we're going to go to this little button up here that says sync your project to GitHub. So, what we're going to do is we're going to connect our GitHub account. Again, GitHub is free. It's actually supported by Microsoft right now. So, you will need to make an account if you don't already have one. So, what I'm going to do is go ahead and press on connect GitHub. I should already be signed in here. If I'm not, then I'll sign in and I'll connect Lovable to GitHub. Okay. So, I've just made that connection. Now, I just need to add an organization here. I believe you can just add an organization, which is just you. So, in my case, I have some GitHub organizations, but I'm just going to add my personal organization, which is my name. For you guys, you probably just have one. And I'm just going to give this access to all of my repositories. And then of course I'm going to have to do the off for this. So let me fix that. Okay. So the organization is added. So I'll go ahead and press continue. And then just connect this here. And what's going to happen now is that I'm going to have my project being synced with GitHub. So you'll see this kind of button pressed up or appeared. Sorry. And if I press view, it's going to bring me to a GitHub repository which contains all of the code that my lovable project has written so far or that lovable has written. So now what I can do is maybe I'm working on another computer. Maybe I'm working in a different account. Maybe I'm working locally. I don't have access to lovable. I can make changes to this GitHub repository here. Like I can go in and I can actually modify the code if I know what I'm doing obviously. And then this will automatically sync with lovable. So if I were to make a change here and then I were to go back to lovable here, I'm going to have to fix this. So I'll show you this in one second. The change would be applied here. And then same thing if I make a change in Lovable, it will automatically sync back to GitHub. Now, for some reason after I did the sync here, something kind of messed up inside of Lovable and it's saying that I have this blank project. So, I'm just going to go to the prompt and I'm just going to tell it to fix this. I'm going to say the following. I just connected my Loveable project to GitHub. And now it's saying that I have a blank application and I'm not able to view my app in the live preview. Can you fix this for me and make sure that my app is still working and that I can view it? Okay. So, we'll give that a second. go ahead and press enter and hopefully that will fix it for us. So it just made a few changes here and you can see that now everything is working and I can view the live preview. So I think there was just some kind of like caching issue or something maybe because of the fact that we synced with GitHub and again as I was saying like now any changes that we make here apply on GitHub and then vice versa. Okay. So, what we've done is we've connected Git. We've created a pretty cool application already. But this is just um kind of working locally, right? What that means is that we're not really storing any data. We just have a basic calculator. But what if we want to go a little bit further? So, what I want to do now is I want to enhance this application and I want to add a feature for user accounts so that users can create an account, they can sign in and then we'll do something basic where they can essentially store the calculations. So anytime they press calculate, we'll just keep a log of those calculations that they've made. So we're just storing it and associating it with those users. Sure, it's not super complex, but again, I want to start small. I want to work on the backend features and explain to you what that looks like, and then we'll keep going. Now, I want to just explain what I mean by backend. Anytime you want to have user related data or you want to have information that's not always publicly available like you want to have an account or you want to have comments or posts or something associated with one person and just that person or a group of people then you're going to need to create a backend. Now lovable will do this for you automatically using something called superbase. Superbase is the default back-end integration for Lovable. And when you need to do that, so when you ask for something that requires that, Lovable should automatically detect that for you and prompt you to set up the Superbase integration. I'm going to explain it more in depth as we go through here, but I'm going to explain the feature to lovable that I want to add. It should then know, okay, I need to set this up. And then we're going to go through those steps. This is slightly more advanced. I'm just warning you right now, but it's obviously important and it's something you need to learn how to do to really take kind of full advantage of this tool. Okay, so let's ask this. All right, I want to make my application more advanced now. I want to allow users to sign in and to create in a new a new account. I then want to store all of the calculations that they type in the calculator in some kind of log. So anytime they press calculate, I want to store what they calculated and just keep some kind of log of all of those calculations that's stored under their account. Again, keep it simple and do not allow my users to access the calculator page unless they've signed into an account. Okay, so I'm asking it to do this here. We should have the dictation pop up. We're going to go ahead and press enter. And now we're just going to wait a second. And it should detect that it needs that backend feature because we're dealing with authentication. And I suggest whenever you're building these back-end features for an application that you start with the authentication, which is kind of what we're doing here, and then you get into more features after that. Okay, so it's actually telling me what I need to do here. It says click the green superbase button in the top right of lovable. Connect to Superbase. You need to create an account if you don't have one. And once it's connected, I'll help you do this. Okay. So, we're going to go here to this green button, which is the Superbase button. And we're going to connect Superbase. If you're not familiar with Suabase, I'm going to press this button right here. This is an all-in-one back-end platform that allows you to handle databases, authentication, uh, functions, which we'll talk about in a second. So, what I'm going to do is just continue here with GitHub, which is what I would recommend that you do to sign in. And we're going to give it access to my organization, which is called Dev Launch. Okay. So, let's do that. We'll just run through this flow. And then we'll go back to Lovable. And you'll see, okay, we've added the organization. So, let's press continue. And I'm just going to create a new project. Okay. So, I'm going to make new project here. We go in our free organization. I'm going to call this lovable. Okay. We'll go with the Singapore region. That's fine. For the password, type something in that you are not going to forget and that ideally is a strong password. And there's a bunch of other stuff here. Don't worry about that. You can just leave this as the default and make your new Superbase project. Okay. And I'm going to save that password for now. All right. So, we've done that. We're going to go back to Lovable now and we're going to connect to this new project that we created. So, we're going to go ahead and press on connect and then it should start spinning this stuff up. So, the project is connected. So, we're going to go back to the chat window here. It says our app is now connected and it's going to tell us what we need to do. So, it's going to do user accounts, all of this kind of stuff. So, what's next? Just keep building. For any questions, just ask. Okay, cool. So, let me read this again. Enable signin signup options. Okay. So, what I'm going to do is I'm just going to copy the the previous prompt that I had because it looks like it didn't really apply all of that. And I'm just going to ask it to do this again now that we've connected to Superbase. So, we should have that backend functionality and hopefully now it's able to make these changes. I believe sometimes we do need to manually do something in Superbase, which it will prompt us to do, but overall lovable should handle most of these operations. So, it's asked us this question and then it's gone and it's written essentially a database operation that's going to apply to set up the database for us. Again, you don't need to worry too much about what this is doing. But before you apply this, it's always a good idea to make sure this is correct because any application you make or change you make to the database can be a little bit tricky later on to fix. So, what I'm going to do is I'm just going to answer this question. Do you want to store additional user profile data like usernames or avatars? I'm just going to say no, I just care about their name and email. Okay. So, I'm just going to tell it that and then I think it's going to go and make a new um kind of database migration file for us essentially that we can apply. Now, at this point, a lot of the stuff you're going to start seeing is going to look a little bit complicated if you're not a programmer, right? So, if you're confused, change into the chat mode and ask it what is it doing? What does this mean? Explain it to me. Don't just blindly trust everything that Lovable gives you here. You want to be um pretty kind of skeptical of what it's doing, especially when it comes to the backend stuff so you don't mess anything up too badly, right? Okay. So, it's done this here. We can read through this. Users can update their own profile. It's created a few rules for us. Okay. All right. Let's go ahead and press apply changes for now and let's see what happens next. So, it looks like it finished here. And now we have this kind of sign in to start button. So, let's press that. we get this kind of field. Okay, so I just filled this in. Let's go create account. Um, and timgmail.com is invalid. Okay, let's try a different email. Okay, and interestingly, it actually sent me a confirmation email, which I didn't even ask it to do, but that's pretty cool. So, I'm going to confirm my email address here by pressing that button. And it looks like it's bringing me back to the application, which I guess is a good sign. And then we're signed in. Okay, that's pretty cool. So, I'm going to go to calculator and let's mess with this now because I've signed in. So, 25 175 71. Okay, let's go gain weight. And we got the calculation. And then it says calculations saved. Okay, that's pretty cool. So now I'm going to go back to home. Let's go calculate my macros. And it looks like it saved my calculation, but I'm not seeing where those logs are. So, what I'm doing now is I'm going back to Lovable and I'm going to just tell it that, okay, this is working, but I'm not seeing a log of my calculations. So, let's ask it to fix that. The authentication seems to be working. However, there's no place where I can see a log of the calculations that I've made. Can you either add a new page or add it to the calculator page and create a simple layout that allows me to view all of the calculations that I've made previously? Okay, so let's get it to do that. Just wait for the dictation to pop in here. All right. So, it says it's added this. Let me sign back in from this page here and see if it works. Okay. So, I'm going to scroll down. I'm going to go to history. And then there we go. We can see that we have the kind of log of what it is that we created. And it gives us this information. All right. That is pretty cool. Now, those are most of the features that I wanted to add to this application. Of course, there's a lot more stuff that we could do, but I wanted to just show you how we add the backend implementation, how we build this out, how we go step by step, kind of the prompting flow. Now, at this point, if we want, we can actually publish this application. So, if we press publish, we can actually publish it. So, we can review the security as well, but I'm not going to do that right now. And when we publish this out, then we'll be able to view it on this domain right here. Now, we also could add custom domains to this, but I'm not going to walk through that process because I assume most of you probably don't already have a domain. And we can set up like search engine optimization, all that kind of stuff. But now if I go to the URL that it just gave me, then we should have this kind of finished, lovable application that users can actually mess around with and view. Now, is this really ready for us to sell and make a billion dollars? Probably not yet. But, you know, it's a good starting point. And in a relatively short amount of time, we've built a pretty cool app. We've got this great animation feature. We have back-end functionality. And we didn't really run into many errors. Now, look, this worked pretty well. I haven't done this before. This was the first run in this video and the reason why I got good results is because I was going slowly and not trying to do too many things at once. It is very possible that mistakes will happen. The bugs will appear. Right? If that's the case, be patient. Slow down. Try to solve the problems one by one. Give as much information as you possibly can to the model or to Loveable in this case. You can take images of what's going wrong. You can attach it into the prompt. You can explain it step by step. You can ask Leovable to break down what it thinks and to attempt one solution at a time and just be creative in the way that you're debugging and I'm sure that you will eventually, you know, kind of come up with a solution. If you guys enjoyed this video, please leave a like, subscribe to the channel, let me know if you want more lovable content. I'd be happy to make some more and I look forward to seeing you in another video. [Music]