Lovable: Is This the Fastest Way to Build Web Apps with AI?

--- type: transcript date: 2024-12-01 youtube_id: UcgKlpu49Ys --- # Transcript: Lovable: Is This the Fastest Way to Build Web Apps with AI? 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 corsera for my brand developers digest the brand colors are black purple and blue so we'll go ahead and we'll submit that and 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 lovables 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 will 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 remove 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 per 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 and 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 and 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 and 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 and 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 well 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 here this video is brought to you by scrimba the Innovative coding platform that brings Interactive Learning 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 uh 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 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 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 and 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 with in lovable as well which is really great and from what I understand I think it can go up to a 100,000 lines worth 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 compared 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 like comment share and subscribe otherwise until the next one