Name: Lovable
Uploaded: 2025-01-22T12:30:51.217Z
Duration: 2 min 33 s
Description: An AI agent enabling users to develop interactive web apps using natural language prompts.

lovable

An AI agent enabling users to develop interactive web apps using natural language prompts.

Lovable

In this video I'm going to be showing you Lovable, which is an AI full stack application builder. Now one thing that really pulled me towards it though is its ability to integrate directly with Superbase completely with natural language. If you want to set up things like authentication or be able to integrate tables to be able to manage all of your different data, I'm going to show you how you can get started. 

What I'm going to demonstrate in this video is building out a course platform. I want to build out a course platform similar IL to UDI or Coursera for my brand Developers Digest. The brand colors are black, purple, and blue, so we'll go ahead and we'll submit that. While that is running through, you can make a free account on Superbase and I'm just going to make a new project name. I'm going to call this one Lovable. I'll make a password for this and I'll create a new project here. 

This is just going to take a couple minutes to spin up. Here we see it's initializing the project and we'll go back to Lovable's. Here we see I'll help you build out a beautiful course platform for Developers Digest. Let me outline the vision as well as the initial features we'll implement. Here we see it working through some of the Basse dolls within Tailwind. We have a course card TSX component. We have the index.

TSX that is updating. We have some featured courses that are hardcoded within here. The go by the end of this we'll try and swap out all of those hardcoded values for what we ultimately have within the database. Here here we go. We can browse the different categories. Become an instructor now. 

One notable thing here is there is no navigation. I'm going to say create a navigation and a footer and remove the prices from the courses. I'm not going to be integrating anything like stripe or anything like that within this video. I'm just going to show you the integration with superbase and get the authentication set up and all of the pieces to actually have the data live within super base rather than being hardcoded. 

Here we see it's creating the navigation. It's creating the footer and you can also see it streaming in if you'd like. So one thing with the platform and it is a little bit different is this is hidden by default unless you of course click it. But what I found is it actually does give pretty good results most of the time. There are errors from time to time but for the most part it does pretty good. 

Here we go. It's refreshing. We have our navigation bar browse courses. It removed the prices just like I asked for and we also have this footer on the bottom. All right now I'm going to say let's make the signin button work with super base. 

To set up super base within a project you can just go and click subase. Now if it's the first time that you're authentic you just have to get permissions to the organization that you want it to access. In this case I'm going to go and click Lovable which is the project in super base that you just saw me set up a couple minutes ago. 

Now we see it's connecting to the Superbase project and it's going to gather the database structure tables and security setting. It will just take a moment. It looks like we haven't created any tables in the Superbase project yet. Now you're connected to Superbase you can set up user accounts login store and use real-time data and advance features like Edge functions. 

Now that we're connected to Superbase let's go ahead and run.

This let's make the sign-in button work with subase. Now the nice thing with subase if you haven't used it before they have a really great SDK across a number of different languages. And they also have some nice react components as well that work similar to something like clerk where you can have these components that you can edit and tweak and sort of configure to your heart's content on whatever you'd like them to look like. 

But overall it has a lot of the minutia sort of figured out of the forget of creating an account logging in an account. All of the email is all set up. You can set up your SMTP settings also within superbase very easily. You can use something like AWS or whatever that you like for emails. 

All right so with the update that it made it looks like it's trying to directly route to the login page if a user is not logged in. I'm going to say instead of routing directly to the login page if a user is not logged in show the homepage and only have the off component within the page once a user clicks to sign in and we'll submit that. 

The other thing that I do quite like with this as well is there's also some really great keyboard shortcuts that you can see here. I can just click Escape if I want to leave that view. That's something that I always appreciate is if you do have keyboard shortcuts within the application. 

Now we have our authentication component. We see that there was build unsuccessful so here we see that there's a number of properties that it didn't recognize. Now this is the other cool thing so you can just click F and it will try and attempt to solve that error for us. Let's go back there. 

Now what was interesting is right before we got the error message this actually looked a bit better right. We'll see what it thinks the error is will help fix the typescript error in the login component by correctly typing the oth components appearance props. We saw a little error flash there we see build unsuccessful. 

Let's go and we'll try and fix this again. It does look potentially like it's just a syntax error. I see the issue now it looks like there are some extra.

Markdown back ticks at the end of the code snpp it that's causing the build errors. I'll remove those and clean up the code. It's fixing the syntax and there we go. 

The other thing to note with this is on superbase. If you do want to use single sign on, you will have to set those up. So that's something that Lovable isn't going to be able to do for you. You can go ahead and enable or disable whichever ones that you do and don't want. There's also some really great documentation on how to set up these as well. 

Now let's go back here. I'm going to go ahead and sign up. Let's create an account here. One thing to know with authentication is they recommend to turn off the confirmation emails from superbase. The reason for that is superbase will try and send an access token and that access token is going to route to a particular domain. With Lovable, the way that this works is you have this subdomain on their Lovable app and subbase doesn't have the context of what this is. You can always set this up after the fact, but that's outside of the scope of this video at least. 

Let's go ahead and make a user account here. We're going to sign up for the first time on superbase. Now if I go back to our superbase account and I go over to authentication, we see now we have our email here that is all set up. What I'm going to say now is if a user is signed in, show them dashboard of the current courses they are working on. We'll submit that and the idea is we'll just have a different view for when users are actually authenticated and within their own system. 

Now the other cool thing with this is you can actually run your SQL directly from Lovable here. Now it won't run automatically, which I do really like because when you're running migrations and stuff like that, anytime you're touching the database, you do generally speaking want to be pretty careful, right? So encourage branching and stuff like that when you are using this in more of a higher stakes application than what I'm demonstrating here. Just always be careful with these things. I'm going to go ahead and apply the migration and then we see all.

Right the migration has been applied successfully. So now we go back over to superbase. Here if you click database they have this great schema visualizer. Here so we see user courses and the courses. And then we have the courses there and the user ID. 

And if we go over to the table editor we have the courses table as well as the user courses as well in addition to the migration. Now it also set up that dashboard UI. If I click browse courses it doesn't do anything quite yet. But I can say I want to add in a browse courses page. And then I want to have a page where it will show a YouTube embed video as well as a playlist for each course. 

Let's break this down into steps. First let's create the browse courses page and then will create the course details page with the video content. Let's just see what it's doing here. Browse courses within here we see the course cards. We have the courses that it will list out. And within here we have the course details. 

And this is going to be where it's going to get that request from subase and then handle the enroll process. And quite a bit that it's working through here. It's really working through faster than you can even read. Here we see it's created two new pages a browse courses page as well as a course details page that shows a YouTube embed as well as a playlist of lessons. 

We see build unsuccessful. Let's try and fix this. Now the great thing with this is it's really just one button away. Right you just click F it's going to pass in that error. One thing with this is even though there are errors now there's going to be errors on all of these platforms. Whether you're using cursor or wind surf or basically anything you're going to get errors. 

But it is really ergonomic to just be able to press one button. It pass in the context of the error from the terminal and attempt to solve the issue. Now I'm going to again try and browse courses here. We see the build was unsuccessful again. We can click F. Now that's done let's go and look at all the courses.

To life dive into a variety of courses from AI engineering to frontend python UI design and much more. Scrim is gamechanging feature is their unique scrim screencast format which lets you pause the lesson anytime and start directly editing the teachers code. Their curriculum is built in collaboration with industry leaders including Mozilla, MDN, Hugging Face, and Lang Chain and includes building application with Open AI Claud Mistal models and guides you on deploying projects to platforms like Cloud Flare. 

While AI tools can assist with coding, a solid grasp of the fundamentals is essential for achieving real experience. Scrimba offers something for everyone from complete beginners to advanced developers and about 80% of Scrimba content is completely free. Sign up for a free account today using my link below and enjoy an extra 20% discount on their Pro plans when you're ready to upgrade. I'm sure you'll love it. 

Here we have our browse courses page. We have the advanced JavaScript for instance. We have this great Rick Ashley video that it generated for us and then we have our course playlist there. We can click enroll successfully enrolled within the course. We have our playlist here that we can click through. 

Now if we go back to Subab base when we did click enroll there, we see our user courses here and we have the ID as well as the course ID on what courses they have enrolled in. Now as a user if you go back to the main dashboard there, this is the course that you're enrolled in. If I go and I enroll in this class and I go back to our main dashboard there, now we're enrolled in two different courses right now. 

Within these courses I want a new table that has all of the details to the course content. There will be videos marked down and each course can have a mixed variety of the two. I also want to remove the hardcoded elements on the courses page. We submit that within this query. It's a bit more complex. We're asking for it to create a table that doesn't exist. We're asking for it to update our database as well as update the UI portion of our application here. Again the migration has run.

Successfully we go over to sub base again. We can now see we have our user courses, course content as well as the courses themselves. Now let's update the course detail page to use the new course content table instead of hardcoded content. All right, so the course details pages now fetches and displays the actual course content. We see introduction to course overview and again if I go back to our database here and we go over to our course content, so we see course overview as well as introduction to course. If I change that, let's put in an exclamation mark for instance and I'll go back here. Now we see that exclamation mark, right? So we have it for this course.

Now there are just a couple things within our database. So I'm going to say add within our database the react and Redux master class and the python course. See that with some data material for each course. We go in, I'll submit that. It's setting up a relatively complicated SQL query for us to run. Like it's setting up all of this seed information for us. It's going to insert all of this information for us now. The migrations run really quick. Once they're generated, the other nice thing too is if you do have a relatively complicated SQL query like we had here, is if it does fail, you can also just press that F button for fix and it will go ahead and it will make an attempt again. I understand the issue, there we go, it's going to attempt again.

Once it finishes, we can go and try and apply the changes here. The migration has been applied. I don't mind that at all. Like these large language models, they're not deterministic, right? They're going to make errors. It's all based on probability. More and more over time these things are going to get better and better, but there's going to be a margin where things are just going to go wrong. There could just be a comma in the wrong place or a syntax error. Like it's very easy for these things to potentially happen sometimes.

Now within our course content, there we go. So now we have an actual Traversy Media React crash course here. We can enroll in that. We have the ability to do some reading and videos.

We also have what actually looks like a markdown renderer as well. The next step would be actually setting up the content to have it rendered dynamically for what you have clicked on. You could also potentially move it. Now that's pretty much it in terms of the build that I'm going to show you. Very impressive, right? What you can build with this. 

Now the other nice thing with this is you can also just click GitHub to make a GitHub repository. It's as easy as a couple clicks. It will make that repo for us once you push a change to this that you've created on GitHub. It's going to default to private when you publish it. From what I understand, it will actually pull in this context from GitHub into your project so you can revisit it within Lovable as well, which is really great. 

From what I understand, I think it can go up to a 100,000 lines worth of code within the repository that you can go back and hop within Lovable and make some tweaks. Overall, that's pretty much it for this video. You can check out the history here. Within 12 prompts, we were able to build out this platform. 

Now mind you, there's still a lot of UI work that obviously we'd want to put in before we actually push anything like this live. But you can also even publish this within the platform as well. There's a ton within here. I think Lovable definitely deserves some pun intended love. Go sign up for an account, try this out for yourself. Let me know your thoughts about Lovable. How does it compare to Bolt?

New V. All of these different code platforms do you like using these types of things versus using an IDE like cursor or wind surf or GitHub co-pilot or what have you. Let me know your thoughts in the comments below. But otherwise that's it for this video. If you found this video useful please share AI Agent Store with colleagues. Otherwise until the next one.

Note, that there may be slight differences in text and video. Watch video for the original content.

Lovable Video