NEW Google Firebase Studio vs Lovable (Which Should You Use?)

0:00 In this video, I'll be comparing the 0:01 brand new Google Firebase Studio and 0:03 Lovable side by side. Google finally 0:05 released their AI coding platform, and 0:07 everybody's talking about it. Well, in 0:08 this video, I'm going to put it to the 0:10 test and see what it could do compared 0:11 to its competitors. We're going to see 0:13 which of these platforms allows 0:14 non-technical people to build the best 0:16 web applications all with zero code. All 0:18 right, let's do it. All right, guys. So, 0:20 I have a side-by-side comparison here. 0:22 On the lefth hand side, I have Firebase 0:24 Studio by Google. This just released. 0:26 And on the right hand side, I have 0:28 lovable.dev, dev which you have seen me 0:30 cover on this channel. So the question 0:32 is which of these platforms can make a 0:34 better application as a non-technical 0:36 person and I'm going to break that down 0:37 exactly in this video. We're going to 0:39 build the same app with the same prompt. 0:40 So let's go ahead and get started. Here 0:43 is the prompt that I'm going to be 0:45 giving each of our applications. So 0:47 let's build an app that allows users to 0:49 input information to get the best credit 0:51 card for them based on their 0:52 specifications. We're going to implement 0:54 information about real credit cards. and 0:56 we want this to be an interactive app 0:57 where they fill out forms and then get 0:59 specialized recommendations for the 1:00 cards they should be using based on 1:02 their preferences, amount of money they 1:03 make, etc. So, this is a prompt we're 1:05 going to be using. As you can see, I put 1:07 this on both of these applications. So, 1:09 what we're going to first of all see is 1:11 with inside of Google Firebase Studio, 1:14 we could start coding our app, but we 1:15 could choose any of these coding 1:17 frameworks that we want to add. You 1:19 know, I am not a coder. I don't know 1:22 necessarily the difference between 1:24 Next.js JS and Angular or Flutter. I 1:27 don't know the difference. So again, 1:28 this is going to be a review coming from 1:30 somebody with a non-technical background 1:31 to see what you could build. So I'm 1:33 going to click prototype with AI. I'm 1:34 not going to touch on the specifics 1:35 there. And with lovable, we just get the 1:37 option to do that. So it's now going to 1:39 begin spinning up our preview for both 1:41 of these different applications. So 1:43 it'll be interesting to see which is 1:44 quicker at giving the initial output 1:47 here. So looks like on the lefth hand 1:49 side firebase studio is asking for 1:51 confirmation on some things and lovable 1:54 already went ahead and started 1:55 configuring this. So it's giving me the 1:57 features. So we have data input form 1:59 recommendation engine card 2:00 recommendation display and then we have 2:02 the colors layout all this stuff. So 2:04 let's just click yes prototype this app 2:06 and then see what this looks like here. 2:08 So you can see Firebase Studio on the 2:10 lefth hand side is beginning to code all 2:11 this out. It looks it just looks a 2:13 little clunky. Let me just say that like 2:14 it it doesn't work smoothly where 2:16 lovable it's just like pleasing to the 2:18 eye watching it actually do its thing. 2:20 So this is my first initial impression 2:22 when comparing these two platforms. All 2:23 right, so we got our first user 2:25 interface output from Firebase Studio. 2:28 This is what we got on the lefth hand 2:29 side. Let's give it a second and wait 2:31 until Lovable gives us our output and 2:33 then let's compare the two. All right, 2:35 so here is the initial output that each 2:36 of these gave us. You can see on the 2:38 lefth hand side we have this very very 2:40 basic like form application that 2:43 Firebase Studio created us. On the right 2:45 hand side, Lovable built us out a full 2:47 landing page that actually looks pretty 2:49 solid. This is our first initial prompt, 2:51 too. So, we need to keep that in mind. 2:52 But, let's just take a look at this. You 2:54 can see find your perfect credit card 2:55 match. It even has like a little user 2:57 interface element of a credit card here 2:59 called Credit Card Genius. Our app's 3:01 called Credit Card Genius. And it's 3:03 basically telling us how it works. We 3:04 could get started and it takes us to 3:06 this interactive thing here which let's 3:08 see if this actually works which looks 3:10 like it does work and on the lefth hand 3:12 side look at what we have here from 3:14 Firebase Studio. It's just it does not 3:15 look good. This is the first initial 3:17 prompt and let's go ahead and like see 3:19 if this works. Let's just do something 3:20 here. Let's just say our income $50,000 3:23 spending habits. Let's say we like to 3:24 spend our money on travel. This is very 3:26 like not great compared to what we're 3:28 seeing over here. Let's click submit. 3:31 And okay, this submit button does not 3:34 work. And let's come over to the right 3:36 hand side and try out Lovable. It's 3:38 asking us what our credit score is. 3:40 Okay, so let's just say we have a good 3:41 credit score. Same thing. Let's say we 3:43 make $50,000. How many credit cards do 3:46 you currently have? So it's factoring in 3:47 a bit more information and context 3:49 compared to the app on the lefth hand 3:51 side. Click next. Takes us here. 3:53 Spending habits. Let's say we spend 3:54 money on travel, business, and dining. 3:58 Click next. Okay, guys. This actually 3:59 looks really, really solid. How often do 4:01 you travel? Travel frequently. Let's 4:03 click next. And then let's say we want 4:05 our travel benefits. And we want sign up 4:08 bonuses or something. Get 4:09 recommendations. Okay. So now we have 4:11 this profile shows we have a good credit 4:13 score. We have $50,000 annual income, 4:15 top spending categories, frequent 4:17 frequency, and we could update our 4:19 preferences as well. So this is a first 4:22 like first off this looks great. Let's 4:24 go back to our prompts and let's begin 4:26 prompting this to make some changes 4:28 here. So, actually, one thing I want to 4:30 mention is both of these have some form 4:31 of editing capability. So, I could come 4:33 here and I could click on this and it 4:35 allows me to use Excaliraw to like 4:37 circle certain things. Let's just say 4:38 like I wanted to change the color of 4:40 that button. But this looks very clunky. 4:42 Look, when I go to edit this, it just 4:44 does not look good at all. Like it's all 4:46 zoomed in. Doesn't look great. But on 4:49 the right hand side, we don't get the 4:50 same Excalibur Draw option to like 4:53 actually use a whiteboard to make 4:54 changes. But we can edit our app via 4:57 this edit feature. and we could click on 4:59 certain parts of the user interface. So 5:00 if we didn't want this or we want to 5:02 change something about it, like say we 5:04 don't like this text, we could come here 5:05 and change the text if we would like. So 5:08 they both have editing capabilities. 5:09 However, I think the editing 5:10 capabilities on lovable is a bit better 5:13 because Google Firebase Studio just 5:14 looks very clunky. Doesn't work well. 5:16 All right. So I'm going to come to this 5:19 on the left hand side. I'm going to come 5:20 over to Firebase Studio and let's just 5:22 say let's make the button functional. I 5:24 want you to make the button functional. 5:25 So that way when I actually click 5:26 submit, it actually submits this 5:28 information. There we go. I'm giving 5:29 that prompt. Also, what I just used 5:31 right there is called Aqua Voice. I 5:33 could just click this command button on 5:35 my keyboard. Speak into my computer. It 5:37 automatically translates that into text. 5:39 Paste that into the user interface. 5:40 Makes it super easy to actually speak 5:42 with your computer instead of type. 5:44 Saves me so much time. So there's a 5:45 little hack for you guys that you guys 5:47 can add to your AI toolkit. Okay, so it 5:50 made a quick change here. Let's go ahead 5:51 and test this out again. Click on 5:52 submit. It says that it's working. 5:54 However, I do not see the functionality 5:57 here. That is not working. Let me maybe 5:59 open this in a separate browser. Maybe 6:02 that's why it's not working. Yeah. Okay. 6:03 So, this just is not working at all. 6:04 Let's go back to our Firebase app. This 6:06 still is not working. I could input 6:08 certain fields, but when I click submit, 6:10 nothing happens. So, let's make our app 6:12 functional. Beginning to write this 6:13 code. It is pretty quick at writing this 6:15 code. It actually uses Gemini 2.5 to 6:18 write our code, which I believe lovable 6:20 still uses Claude to do so. Claude 3.7 6:23 on it, I would assume. Okay, I think 6:25 maybe this works now. Okay, there we go. 6:27 So, it now spits out a card 6:29 recommendation here. However, it it just 6:31 does not look good. And I wonder if this 6:34 is actual real card information. So, 6:36 let's come back to Lovable and let's 6:38 actually get it to recommend a card for 6:40 us. This looks great. The user interface 6:42 is awesome. However, I now want you to 6:44 actually recommend a card based on my 6:48 specifications that I give when filling 6:50 out the form. So after I get this 6:52 functionality working, what we need to 6:53 do, we need to test out how seamless it 6:55 is to actually add user authentication. 6:58 So what this means, this allows for a 7:00 user to sign up. So for example, inside 7:02 of our lovable app, we have our landing 7:04 page. I want to now make it so that way 7:06 in order to access this app right here, 7:08 you need to actually be a user as well 7:10 as we're going to add Stripe payment. So 7:11 you need to be a paying user of our 7:13 application to actually use it. So, I'm 7:16 going to test that out for both of these 7:17 to see how easy it is to implement both 7:19 user authentication as well as Stripe 7:21 payments because we want to be able to 7:23 charge for our app potentially. That is 7:24 something with these platforms that we, 7:26 you know, want to want to be able to do. 7:27 We want to see which platform is more 7:28 seamless to be able to do that. So, 7:30 we're going to test that out after we 7:31 get functionality working properly on 7:33 both these apps. Okay. So, lovable on 7:35 the right hand side is actually not 7:36 giving me a recommendation. So, I 7:38 actually don't know if on the lefth hand 7:40 sidebase studio is giving me the correct 7:42 information. I need to actually ask 7:43 right here and say, is this real 7:45 information or mock data? The card 7:46 recommendations you're giving me, is 7:48 this real information or is this just 7:50 like fake data? And then I'm going to 7:51 come over to lovable and then let's just 7:53 ask if we need to like add some form of 7:55 API like to access like chatbt for 7:58 example in order to pull the correct 8:00 recommendations. I want you to give me 8:02 actual recommendations. Do we need to 8:03 add any like AI API key in order for you 8:07 to pull information? Okay, so it's 8:08 saying that we don't actually need to 8:09 add that because inside of this credit 8:12 card context page, we already have some 8:15 real credit card data and sophisticated 8:17 recommendation engines. So it says that 8:19 it's already built out for the left-h 8:21 hand side. Google Firebase Studio is 8:23 saying that this is just fake data. We 8:25 could call an API to get real 8:27 recommendations. Okay, let's add some 8:29 form of like AI API in order to use AI 8:32 to recommend certain credit cards for 8:34 us. Okay, so this is what we're seeing 8:36 on the right hand side with lovable. 8:37 It's actually giving us it has an 8:39 amazing looking user interface. This the 8:41 user interface just looks pretty 8:42 terrible and it doesn't pull real credit 8:44 card information for whatever reason. So 8:45 we need to add the Google Gemini API 8:48 key. So Google Gemini is Google's AI 8:50 model just like Chatabt, but it's 8:53 Google's version essentially. And what 8:55 we could do is we could just 8:56 autogenerate an API key, which is 8:57 actually pretty cool since this 8:59 integrates directly with Google's 9:00 ecosystem. That's the cool thing about 9:02 Firebase Studio and the cool potential 9:04 here is it integrates with all of the 9:06 different applications they have. So 9:08 something like Google Gemini, it's 9:09 really easy to just instantly connect 9:11 our LLM here if we're looking to use AI 9:13 um on the back end of our application as 9:15 well as like databases. Firebase is 9:17 Google's like native database 9:19 essentially. So if we could hook up a 9:21 database directly inside of Firebase, 9:23 then that could be pretty great. 9:25 However, I don't usually like using 9:26 Firebase. I like using Lovable in Bolt. 9:29 I like using Superbase, which it it 9:31 natively integrates. It's just much 9:33 simpler to use. It's not old and clunky. 9:35 It's like much more intuitive to use. 9:36 So, that's something we need to keep in 9:38 mind when we're going to begin building 9:39 out our database here. Okay, so it says 9:40 our API key is updated. Let's go ahead 9:42 and try this again. See if this is 9:44 working properly. Okay, so it did give 9:46 us a recommendation here. Chase Sapphire 9:48 Reserve. Interesting. Okay, so that's 9:50 real data here, but again, the user 9:52 interface just does not look good at 9:53 all. So, there's something we need to do 9:55 now. We need to add user authentication 9:57 so users could sign up. And then we also 10:00 store our like profile information as 10:03 well as our credit cards that we want to 10:04 explore into our account. So let's go 10:06 ahead and do that now. I'm going to come 10:07 to Firebase Studio and just say let's 10:09 add user authentication to our app. So 10:11 in order to sign up and use our app, 10:12 they need to be a user. And then I'm 10:15 going to give the exact same prompt over 10:17 to lovable. Guys, I'm enjoying doing 10:18 this sideby-side comparison. If you guys 10:20 want more content like this, make sure 10:21 to subscribe to the channel. I cover all 10:23 things AI for non techies. So, if you're 10:25 not technical, I'm going to show you 10:26 kind of different AI tools and platforms 10:28 you could use every single day as either 10:30 a business owner or a just everyday 10:32 person looking to stay ahead of the 10:33 curve with AI. And if you guys haven't 10:34 seen in the past, I've covered plenty of 10:36 videos talking about lovable, bolt, 10:38 replet agent, all these AI coding 10:40 platforms. So, you can build apps with 10:41 AI even with zero coding knowledge. All 10:43 right, looks like we are getting an 10:45 error over on the lefth hand side with 10:46 Firebase Studio. So, let's click try 10:48 again. However, it looks like Lovable is 10:50 seamlessly figuring this out. Oh, 10:52 actually looks like we ran into an error 10:53 here. I spoke slightly too soon. And 10:55 looks like we ran into another error in 10:57 Firebase Studio. Let's click fix. I do 10:59 not know what the hell is going on here. 11:01 However, it does not look good. And then 11:03 let's click try to fix with lovable. 11:05 It's kind of good that we both we ran 11:06 into errors on both platforms at the 11:08 same time just to kind of see how they 11:10 handle specific errors. Okay, so now it 11:12 looks like we have an updated user 11:14 interface. We got credit card compass. 11:15 Cool name. Let's sign up. Curious how 11:17 this flow is going to work. So it's 11:18 saying I have two issues. Okay. I don't 11:21 know what's going on here. All right. 11:23 All right. And then on the right hand 11:24 side, I'm getting an error here because 11:25 for whatever reason, it's trying to use 11:26 clerk, which helps with the user 11:28 authentication. However, I've never done 11:29 this before. Usually, Superbase just 11:31 does it. So, I'm going to come here and 11:32 just say, can we just use Superbase for 11:34 user authentication? All right. So, now 11:36 it's giving me the instructions on how 11:37 to implement Superbase. Click on the 11:38 green Superbase button in the top right. 11:40 Let's click that. And you come to 11:41 Superbase and actually create a project. 11:44 Okay. So, now I have this app created. 11:45 Let's give it a second while it loads. 11:47 All right. So, in order to integrate our 11:49 app here, I'm going to click on credit 11:51 card app, which is the project I just 11:52 created. I'm going to click connect. 11:53 Okay, great. That should be working. I'm 11:55 going to go back to project now. And 11:56 then it says our app is now connected to 11:59 Superbase. So, we can add user accounts 12:02 and login, store and use real data, use 12:04 advanced features like edge functions. 12:06 Getting another error here. So, let's 12:08 troubleshoot this error. Okay, this is 12:09 because it was trying to use clerk for 12:10 authentication, which we're not going to 12:12 be using anymore cuz we're using 12:13 superbase. So, that's makes sense as an 12:15 error. However, on the lefth hand side 12:16 with um Firebase Studio, I have no clue 12:18 what's going on here, honestly. So, 12:19 let's try to sign up. Our app is not 12:21 working. When I click the sign up 12:22 button, it does not allow me to sign up 12:24 or anything. Okay, left-hand side, 12:26 Firebase Studio is nothing but errors, 12:28 lovable. On the right hand side, we have 12:29 an amazing looking landing page. We have 12:31 a functioning application that looks 12:33 amazing. So, now it's saying that our 12:35 user authentication should be working 12:36 now. So, let's click get started. Okay, 12:38 this makes sense. It's asking me to sign 12:40 up. First name, email, password. Let's 12:43 sign up. Okay, it says that we have 12:44 successfully signed up. However, let's 12:46 come to our app here. Looks like the 12:48 login is not working exactly how we need 12:49 it. So, I need to make a change here. 12:51 When a new user signs up, I don't want 12:52 you to send them a link to confirm via 12:54 email. I just want them to be able to 12:56 sign up directly to the app. So, what 12:58 this is going to do now is this is going 12:59 to then change the rules inside of our 13:01 Superbase account. So, it's going to 13:02 come to SQSQL editor. What this will do 13:04 is this will basically write out certain 13:06 rules in order for our database to 13:08 follow. So, now it should then update 13:10 this table hopefully with like users. 13:12 Let's give it a second and see if it 13:13 actually does that. Looks like we need 13:15 to actually change something manually in 13:17 here. So, all right. So, this is now 13:19 working. I was actually able to sign 13:21 into an account or sign up for an 13:22 account and it then stores this 13:23 information here. Again, Superbase is 13:25 our database. This is where we allow 13:26 users to sign up and we could even store 13:28 kind of information to their account 13:30 such as like this profile information 13:32 here once we actually get the credit 13:34 card specifications. So, let's go ahead. 13:36 Let's then add something here. Let's say 13:38 I want you to now add I want you to now 13:40 save any information to a user profile 13:44 when they actually get their specific 13:46 card information. So once they fill out 13:48 the form and everything, I want you to 13:50 save this information to their user 13:52 profile. Okay, we're making progress 13:54 here with our lovable app. However, on 13:55 the left hand side, Firebase Studio, I 13:57 have no clue what's going on. I it it is 13:59 just not working. Like click sign up. 14:02 There's three issues here. I mean, I I 14:04 don't know what to do. Firebase API is 14:06 key is missing. So we need to add some 14:08 Firebase API. Can you help me fix these 14:10 errors? So the thing is with level one, 14:12 I'm able to just like ask it to help me 14:14 fix the errors and it usually fixes it. 14:16 I have no clue what to do in Firebase 14:17 Studio as a non-technical person if I'm 14:19 being completely honest. And then going 14:20 back to level one on the right hand 14:22 side, you could see it's now adding all 14:23 this information. This is basically in 14:25 order to um set up profile tables inside 14:28 of Superbase so we could store 14:29 information to user accounts. Let's 14:31 click apply. Okay, so this is where 14:32 we're at with with our lovable app. So 14:34 we could actually go ahead, we can fill 14:36 out our specifications. Gives us our 14:38 recommendations here. And then we could 14:39 save our profile. So what this does is 14:41 this automatically stores this 14:42 information in a database inside of 14:44 Superbase. So we could always have this 14:46 information whenever we log into our 14:48 account because that is what Superbase 14:49 does. It ties us to our user profile 14:51 using a database. What I could do now, 14:53 let's just say once the user fills out 14:55 the questionnaire, let's just show them 14:57 the page that you're on now instead of 15:00 having to fill it out again. I want them 15:01 to just fill it out once and be done 15:03 with it unless they want to go back and 15:04 change it. Okay, unfortunately this is 15:06 what we're looking at. We don't see like 15:08 we don't we have a fully functioning 15:10 application on the right hand side. 15:12 Basically, I'm going to make a couple 15:13 more changes with Lovable on the left 15:16 hand side. Firebase Studio. I can't get 15:17 the app to work. Maybe I'm going to take 15:19 a like I'm going to play around with 15:21 this a bit, see if I can make some 15:22 changes, but I mean I can't even get 15:23 these buttons to work. So, not to 15:25 mention when it was working slightly, 15:28 like the user interface was absolutely 15:29 terrible. So take this into 15:31 consideration when you're choosing which 15:33 platform to use. Lovable, non-technical, 15:35 super easy to use. I built something 15:37 pretty cool in a matter of like 30 15:39 minutes or something if that. So let me 15:41 keep playing around with this. I'm going 15:42 to show you the final product here in a 15:44 second. But this is my initial kind of 15:45 consensus after using both these 15:47 platforms literally side by side. All 15:49 right, here's where we have got with our 15:51 lovable app. So what I'm going to do is 15:53 let's go ahead and open a new preview. 15:56 So this is like what our app looks like. 15:58 We have our landing page. This looks 15:59 great. We have our credit card genius. 16:01 We can click on get started. Actually, I 16:03 need to come to a incognito browser to 16:05 try this for the first time. All right. 16:06 So, I'm trying this in a new browser. 16:08 I'm going to click here. We have our 16:09 landing page. Click on get started. We 16:11 can sign up for an account. Let's just 16:12 do r something random. Rock test. T 16:15 testing. All right. So, we could sign up 16:17 for an account. What we then do is we 16:19 could fill out our questionnaire in 16:21 order to figure this out. So, let's just 16:22 try a different like different 16:24 information here than we did previously. 16:26 So, let's say our credit card is poor. 16:28 We make $25,000 per year. We have one 16:30 credit card. Let's say that we spend 16:33 most of our stuff on groceries, online 16:35 shopping, and gas. Next, we hardly ever 16:38 travel. We want to get cash back 16:40 rewards. So, we're now going to get 16:42 recommendations. So, it gives us the 16:44 correct credit card because it's not 16:46 recommending the same one as the other 16:48 one where I have a good credit score. I 16:49 like to travel, all that stuff. So, this 16:51 is working. We could click on or first 16:52 of all, we could save our profile. So, 16:54 this will save it to our database that 16:56 we connected. We can click on our 16:58 details. You could see this discover 17:00 secured. It tells us all the 17:01 information. This is our required credit 17:02 score. It could be port to fair. Here's 17:04 our interest rate. Here's our intro APR, 17:06 key benefits. All this stuff. We could 17:08 compare it with other cards or and one 17:10 thing I want to mention is I could 17:12 refresh this and this information will 17:15 stay here because I added the ability to 17:17 save this to our profile inside of 17:19 Superbase. So that is our app right here 17:21 is working properly. It's fully 17:23 functioning. and our app on the lefth 17:25 hand side. Guys, I've been trying to 17:26 make fixes to this. I literally cannot 17:27 get it to work. So, there we have it. 17:29 That right there is the test. Google 17:32 Firebase Studio versus Lovable.dev. 17:34 Lovable.dev blew it out of the water. A 17:36 lot of people are saying that Firebase 17:38 Studio is crazy. You guys should try it. 17:40 It's It's going to be a gamecher. It's 17:42 not. I mean, I'm just going to say as a 17:43 nontechnical person, it's not good. 17:44 There are so many other better platforms 17:46 out there between Bolt, Lovable, all 17:48 these other ones. So maybe it will be 17:50 good over time because it integrates 17:52 with all their applications and it would 17:54 be awesome to seamlessly like build an 17:57 app built into their entire ecosystem as 17:59 far as Google, but it's just not there 18:00 yet. So if you guys are not technical, 18:02 don't even try it right now. I don't 18:03 think it's good. But um if you guys got 18:05 some value from this, make sure to leave 18:06 a like, leave a comment, subscribe to 18:07 the channel. Cover all things AI for non 18:09 techies, showing you what you can use as 18:11 a day-to-day person in your business or 18:14 your everyday life. So hope you guys got 18:15 some value. See you guys in the next