Transcription
What if there existed a free AI coding tool, fully free? Well, it exists now. Google just launched Firebase Studio, and it's completely free. It's tied in with Google Firebase, and it allows you to take an idea, prototype it, and put it in the world. But there's a catch. It's not perfect. And in this episode, we do a side-by-side comparison of Google Firebase Studio and Lovable, and we see if it's worth your time. So, enjoy the episode. [Music]
We got Yonyi on the pod. He is a software engineer with like 100,000 followers because he shares a lot of sauce with how to vibe code. And today we are going to go through Firebase Studio, the new product by Google, and we're going to see how good it is. So Yonyi, by the end of this episode of the Startup Ideas podcast, what are people going to learn?
So, by the end of this episode, everyone should have a good idea of what this new Firebase Studio thing is, what it's capable of, what it isn't capable of, and we'll even do a side-by-side comparison of, um, putting in one prompt to both Firebase Studio and Lovable, and we'll kind of see the differences in what they are capable of.
Cool. All right, let's let's, uh, let's give it a rip. I I will say I think Firebase Studio is free, right?
Yeah. So Firebase Studio is completely free. Um, this is a new offering. It came out like less than two weeks ago as of the time of this recording. So super new, completely free, and this is uh Google's take on a app creating prototyping product. So pretty cool. All right, let's get into it.
Um, this is what Firebase Studio looks like when you show up. This is what you see here: your workspaces, like any previous projects that you may have uh created. Something that's really good that Firebase Studio did is they have a bunch of templates for projects. So you click here into new workspace and you see like all of these different templates. It's like boilerplate with best practices built in. So say you want to create a React app, or a Nex.js JS app, or some kind of mobile app, React Native, Flutter, whatever it might be that you're trying to create. Uh, rather than having to do it completely from scratch, maybe you don't know the right way to set up that project. Maybe you don't know what the best practices are. Here you get a repo that's already set up with all that built in. So that's pretty good.
Um, something worth mentioning is like maybe not all the viewers know the difference between React and Nex.js and Vue.js; like maybe you just want a web app that does something. Uh, Firebase Studio kind of assumes that you're a little bit more of a technical user. So if you show up to maybe Lovable or Bolt, you don't really need to know anything about different JavaScript frameworks, uh, the differences, which one you may or may not. You just say give me an app that does XYZ. Um, so here in Firebase immediately you can kind of tell this is a little bit for the more advanced user.
Say that we want a React app. We just click React app. We'd give it some name. We'll call it demo project. Again, you choose if it you want JavaScript or TypeScript. A lot of vibe coders aren't going to know what that is. Maybe you don't care. Maybe you care. So, uh, worth calling that out. I mean, what is the difference between JavaScript and TypeScript?
TypeScript is uh enforces types, data types into your variables. So it's like uh it's another layer of safety built on top of JavaScript basically.
So here you get a project. This is like your IDE. This is where you interact with your code. Um, you see a lot of files. Again, you it probably helps to have some idea of of uh how code works or some familiarity with code. Otherwise, you're going to show up here, everything's red, underlined. You kind of freak out. There's a lot of things going on. So, uh, that's kind of uh the vibe with Firebase Studio. There's some expectation that you know what you're looking at. And here immediately you can see a little web preview of this React app that it spit out. count is zero. Okay, so we have a little button.
Um, Gemini is the model that uh Google created. This is all under Google obviously, Firebase Studio. So if you want to do a Gemini code generation, it's with Gemini. So you have this little Gemini tab here. Um, you can select some models. Gemini Pro 2.5 is the more recent model, but it's fairly expensive, or at least they're not going to give you access for free. So, you need to paste in a Gemini API key. Let me do that really quick. You can even click get a Gemini API key. Say you don't have one. This is all under Google. So, they have nice tight integrations like that.
Quick break in the pod to tell you a little bit about Startup Empire. So, Startup Empire is my private membership where it's a bunch of people like me, like you who want to build out their startup ideas. Uh, now they're looking for content to help accelerate that. They're looking for potential co-founders. They're looking for uh tutorials from people like me to come in and tell them, "How do you do email marketing? How do you build an audience? How do you go viral on Twitter?" All these different things. That's exactly what Startup Empire is. And it's for people who want to start a startup but are looking for ideas, or it's for people who have a startup but just they're not seeing the traction uh that they need. So you can check out the link to startupmpire.co in the description.
Let's say we okay we have a super basic React app, and let's say we want to turn it into a different app. Let's say we want an app where you can create me and modify this app into one that allows me to swipe on images of dogs and tells me what my preferences of dog breeds are. So, we're going to make a little Tinder for dogs, hopefully.
Classic.
Classic. A very classic starter app.
Exactly. And to be clear, when you say Tinder for dogs, you're not talking about relationships with humans with dogs.
No, we're just going to have like a hope I mean, we'll see. We're at uh Gemini's behest here, but we'll hopefully have little images of dogs and you can select what dogs you you want to own and which ones you don't want to own, and it'll tell you something about your preferences. Maybe best case scenario.
I will say this is my first time seeing this. Um, it's a bit overwhelming just from a UI perspective.
Definitely. Um, what I love about Bolt or Lovable or some of these others is that it's it just feels a lot more calm, and like my heart rate is in is a bit higher right now. Like I feel like I'm going to do something wrong.
Yeah. No, that's totally fair. And you have all these buttons and files and like there's totally a lot going on here. Maybe for a developer it's like more familiar, but you know, for the average person, this is like super overwhelming.
Um, yeah. So, anyway, all right. Created some files or uh modified some files. Let's see what we got. Okay. All right. So, we got a dog. We can like or dislike it. And where are these images coming from?
Yeah, that's a good idea. That's a good question. Let's see. These images are coming from dog. So, I guess Gemini just found some uh open API, public API of images of dogs. So, that's the vibe. Dog Tinder. It came up with that on its own. Okay. So, some like super simple app uh wireframes from a super simple prompt, but again, you're like in this view, there's a lot going on. It may be a bit overwhelming.
Um, worthwhile disclaimer is that Firebase is Google's like backend as a service kind of platform. And so because now we're in Firebase Studio, we have all of these like one-touch fairly easy integrations into that Firebase ecosystem. So if you're familiar with Firebase or you're building with Firebase, this may be really nice. Uh, for example, if you want to host the web app, you can one click more or less deploy this into um uh Firebase web hosting. Uh, if you want to deploy to the cloud, you can do that as well. Google has GCP, Google Cloud, so you can quickly deploy into Google Cloud, Google Maps, Secret Manager. So again, it has these integrations within the Google ecosystem. So if you're a developer and you build with Google and you build onto Google Cloud, this could be really nice.
Could you not do that on the Bolts and Lovables of the world? It's probably not as tightly connected into Google's ecosystem. Like Lovable I think can has a Superbase integration. So Lovable, you can one-click deploy or you know connect to databases in Superbase, but here um it's all Google products, Google integrations, and can you make the quick case on as to why Firebase is you know maybe better in some ways than Superbase?
Yeah. So, Firebase probably gives you more control um into like the underlying Postgress SQL instance, I would imagine. Um, again, it's for the more technical folks. So if you want just like a database, you don't know what database is under the hood, you don't care, you just need like a user table or something like that, you're building a consumer mobile app, you need some kind of backend something. Uh, you probably don't need all of the complexities and functionalities inside of Google. Um, but if you're, you know, a more experienced developer, you're familiar with the Google ecosystem, then this is uh probably a great product for you.
Okay, so that's super brief: Firebase Studio. So this is one way that you can prototype apps in Firebase Studio uh is with this sort of Gemini tab inside of this code editor view. You also they have something called an app prototyping agent, and that's right here. So on the homepage it's kind of asking you to input a prompt here. We went through the new workspaces. We opened up a template, and we kind of went the other way. This is there's they're sort of hinting that they prefer that you uh that you start here. And they have some sample prompts. So like a tipping calculator. What is that prompt? A tipping calculator app to help calculate a tip on a bill amongst friends, or an expense tracker, or a recipe generator. So this initiates a little bit of a different flow than what we saw. And this one will be a little less overwhelming. This one will be for maybe the less technical folks. Sort of more similar to what you would expect with Bolt or Lovable. And it's just a text-based interaction. So, what we're actually going to do here is we're going to use this prototyping flow. And in parallel, we're going to use Lovable. And we're just going to take a prompt and we're going to throw it into both, a super simple prompt like the way that you would talk to a human, not some kind of crazy uh meta prompt engineered thing. Just like build me an app that does something. So specifically, we're going to build an app uh like a budgeting app or an expense tracker app.
So, so I have this prompt: a budgeting app that aggregates all transactions across financial institutions and displays daily, weekly, monthly spending as well as net worth. So, sort of like a personal finance tracker app. And we'll just throw this into Firebase Studio and we'll throw this into Lovable. All right. So, Lovable usually takes a bit longer. So, we'll do that first, and Firebase Studio usually a bit quicker to return something.
All right. So, this again is that like app prototyping view. So, most people when they come into Firebase Studio, this is what they're going to experience um right off the rip. So, you see, okay, here's a plan for how we'll prototype this app. They're going to call it FINRA. You can edit this as you choose. I will say that's really this is really sick.
Yeah, this is really
Yeah. Uh, daily spending view, display daily spending with clear categorization, weekly spending report, display weekly spending trends with comparison, monthly budget overview, net worth calculation. Okay, a bunch of things. And then you just click prototype this app.
Interesting that they use the word prototype, not build.
Yeah, they even call it the app prototyping agent. So, I think they're very they're very explicit that this is a prototype, and then all further developments you do in that kind of more overwhelming, you know, code editor view. So, this is the only time you're going to really have this nice uh kind of simple view where you just speak to it like a human and it goes to write text. After this, once it takes you into the codebase, that's when you have the whole uh editor right there.
Another thing worth noting is that in Firebase Studio, oh, okay, there you go. I was going to say that you see all the code as it's generated. So, like it shows you those files and and uh you're kind of more directly interacting with the code in Lovable, which has been over here cooking quietly. uh, it doesn't show you any code. This is your experience. It kind of doesn't want you to deal with the code. It kind of just wants you to deal with the interface. You can see the code if you click here. It will show you the files that it's creating, but it hides that by default. So again, I think it's something to say about the uh different intended users perhaps of the two products.
Well, I also think that that's everything I've seen so far from Firebase Studio has been very Googly, meaning it's like very technical.
Yeah. Um, it it's like Android, right? You can customize it. Um, it's not like Apple where it's like this easy, you know, abstract. Everything's abstracted away.
For sure. So, some people will like it, some people some people will prefer it for sure.
Um, some people won't.
Yeah, totally agree. So, um, Firebase Studio has a feedback ticketing system that like if you want to request a feature or you have feedback on some on some features, they have a whole board for that. And um, the number one feedback request, at least at the time that I looked, was please use Gemini 2.5 Pro for the app prototyping. It may not be using that by default. Uh, Gemini 2.5 Pro is Google's latest hottest best model for code generation, and it's actually quite good at generating UI whereas whatever it's using, maybe Gemini 2.0, know, maybe some flash model. Uh, you'll see this like this is the UI that it just spit out. It's like plain HTML. Let's see. Lovable still cooking. And then you see in the corner we have an issue. So, at least it's nice that they surface issues in a way that you can see them without having to go into the code here. But like, what is this issue? React does not recognize the default active prop on a DOM element. like okay the probably the average person isn't going to know what to do with this right so they say I've detected an error want me to fix it and you can say fix error and hopefully it'll fix the error so so with uh with Firebase Studio there's some amount of that back and forth like if you get an error then it prompts you to fix it I think the same is is true for Lovable but that's what we got okay so super simple UI, right? Not a ton of styling here, but approximately functioning, right? We have some numbers, net worth, daily, weekly, monthly spending. If we want to keep prototyping, we can keep prompting here. Let's say, uh, please make more dummy data. Please make more dummy data. Monthly budget. We're not really seeing a lot.
No, no data to display. Please make more dummy data. A little bit of a stupid prompt. Didn't give it a lot to go off of. And we can kind of just see what it does with that. Weekly spending is empty. Monthly spending is empty. So, we can do like small tweaks. I don't think it's going to do dramatic um dramatic improvements to the UI, but we can try to do that as well. Let's check in on Lovable.
Oh boy. Oh, it's still okay. It's still going. Improve the UI to make it look more modern. Do you have the ability to give it a screenshot and make it, you know, for example, screenshotting the stripe.com website and then putting it
Yeah, it looks like we can. Let's try that. Always a good idea to do that, I feel like. What do you think, Yony?
Definitely. Yeah, definitely. A good website is mobin.com. If if viewers are unfamiliar, Mobin has like tons of UIs and screen interactions from all of your all of your popular websites. So, if you go to Mobin, you can get a ton of uh prototypes that you can screenshot and feed into your LLM. So, that's something I do all the time. See, can we drag? This is a Stripe landing page screenshot. Make it in the style of this screenshot. Cool. Let's check in on on Lovable. Okay. So, we have something over here. We have some animations out of the box. When the pages render in Lovable, they animate. Okay. So, it it looks a bit cleaner. There's some user interaction here.
Yeah. I mean, it's objectively way cleaner.
Yeah. There's like red and green transactions. Cool.
Oh boy. You hate to see this. You hate to see this. So, we definitely confused the model that we're talking to here. We have like some combination of the Stripe landing page. They took verbatim a lot of the text from here. Um, and then our product down below. All right, cool. What if we want to make some kind of uh like user signin flow? We want some authentication. What if we want uh we don't want everyone to be able to see our transactions, right? So, we want some user signin flow. Make a user sign in [Applause] flow with register and login. Greg, what do you think here? What are we missing? What what how can we improve this Lovable design?
U just from a visual perspective or from a feature?
Yeah. Yeah. Visual. Um, I think that from like a user psychology perspective, someone's net worth on a chart is an extremely addictive uh thing to look at. And I think that's going to drive daily logins. And I also think that I mean this is a feature, but I also think that um how do how do you get people to share that net worth? Um, well actually I take it back. Bad idea. I was I was going to say sometimes, okay, this is, you know, enter Greg's mind here. Sometime I always think about dashboards of like how do you create something that people are going to share on social so that you get virality net worth not something that people are going to share. Although people share Stripe MR screenshots, so who knows?
True. It's not it's not impossible. But we're not going to put a share button because that's maybe a bit too much. But if we can make this screenshot worthy with a net worth on a graph, I think that could be really cool. Let's just ask it to make it more screenshot worthy. I don't know what models Lovable are using behind the hood, but they're really quite good. Uh, to your point, like it's much more visually appealing than what we're getting right now out of Firebase Studio. Then Firebase Studio parsing ECMAScript source code failed. Can click fix error and hope it fix error. I've gotten into these sort of death loops with Firebase Studio where it's like error after error after error and it just surfaces the same error over and over again. So it's definitely capable of that. But honestly, like to their credit, once you have this platform built, you like the models, they improve over time. If they're not using their best models, they can plug those in with time. So, I'm bullish on on the future of this product. We're just so early. Like, we're 10 days in post launch. So, we're going to have a lot of this stuff. They're very explicit that this is alpha. There may be breaking changes or preview they call it. So I think that's just what you get from a free product 10 days after launch. Use O. Okay. All right. So Firebase Studio I think we broke our app by asking it for user signin. Lovable I think is pretty good at implementing. Okay. So that looks a lot better. Some formatting issues here but net worth over time. Greg, we got you there. We have a sidebar.
Thank you.
My pleasure. Okay, cool. Now, let's see. User signin with Lovable. I think it just prompt. Yeah, you have a little Superbase logo in the corner. It's pretty good at doing this. Setup user off with register and sign in flows. In my experience with Lovable, it does it it can oneshot this. It sets up the Superbase integration. you'll get like a a confirmation email to your email when you actually sign up for this little prototype app. So there you go. To get started, click on the Superbase button. Connect Lovable project to Superbase. Let's just do that. We can uh create a new project. Okay, let's use an existing project project. Your app is now connected to Superbase. So that's what it feels
Like, in Lovable, to connect to a real database, is it just like, takes you out into Superbase? You click a couple buttons, and and now you're fully connected. Now we can ask it again to set up the O; should be able to do it now.
Meanwhile, Firebase, poor guy, I think he's cooked. So, in the corner, you can switch to code from this app prototyping view. Let's say you get to a working prototype, or something you're happy with, or something that's fully broken and you're an engineer. So now you need to intervene and fix things. You go up here to switch to code, and it'll take you back to that code editor view that we saw from the beginning. And, uh, presumably you're a developer; otherwise, you would have probably already freaked out and switched to Lovable a long time ago. But say you're a developer, and now you're here in the code view. You can go and fix those bugs that the prototyping agent was not able to fix. Setup O will follow both practices. Do you okay it asks some questions? Yes.
So, something I was thinking about is, given that Firebase Studio is clearly tailored to the experienced developer—like, if you're not an experienced developer, you're, you have no business here—so if you are an experienced developer, why would you choose Firebase Studio over some other tools that are already out there floating around for experienced developers, like Windsurf, like Cursor? And the best answer I could come up with is that if you love Google products, and you love Google Cloud, and you already build heavily into it, and you're really into Firebase, and you prefer it over like handrolling your own backends, then maybe you like this because it does have one-click integrations with those other Firebase products. So if you want to host it, you can just click a button, initialize Firebase hosting. But if you're an experienced developer, you're probably already reasonably good at deploying hosting to things on your own. So, it's sort of this middle ground that like, if you want one-click deployments into Google Cloud, then maybe you're less experienced, or maybe you just like the time savings. So, it's it's sort of for that like middle to experienced, uh, developer who's already familiar with the with the Google ecosystem.
It's it's almost surprising that they launched this product to the public. Yeah, I think it was rushed, to be honest. There were probably some internal and external pressures to get something out because like Lovable technically launched over a year ago, but they had a they were called something else at first. I think it was like GPT Engineer. They had a couple of failed launches, and then they had their real successful lovable.dev launch like four months ago, and so Lovable in 4 months, this small team of European developers, they went from like 0 to 20 million ARR or something. Recently I saw 17 million, but that was already a month ago. So I mean these products are taking off. Cursor obviously fastest company to hit 100 million ARR. So, I think there's just pressure for them to get involved. Uh, to their credit, Gemini 2.5 Pro is actually an extremely good model.
Yeah, it's really good. I could see—I say that not by saying I don't see like, don't use Firebase Studio. I say it by—I see where Firebase Studio is going to go. It's going to be a mega competitor to Cursor, Windsurf, 100%. They're probably going to have—they're actually probably going to use models that are not even out to the public, um, realistically for for the future of Firebase Studio. That's what I think. And I bet they're, you know, I mean obviously they see what everyone's prompting, right? So the models are going to get smarter and smarter and smarter. So, I think it's, you know, just going through this for the first time, it might be fun to play with Firebase Studio, realize that it's probably not perfect today. Far from perfect, actually, and probably not worth really like developing on, but knowing that in like 6 months it might be fire.
Yeah. And that's kind of been Google's story in this AI race of the last couple years. They've been an underdog. They like had a really rough launch to Gemini initially a year or two ago, and uh, you know, Gemini 2.5 Pro is a banger of a model. So I think they're on the up and up. Um, I'm bullish on where this product will go, but yeah, we're just so early. We're super early, and it's going to be like a very high-lever valuable product for them. It's going to bring a ton of users into the Firebase ecosystem. There's already an increasing amount of Firebase users in this like new consumer mobile app wave where you you want some simple mobile app and you need a backend to like track analytics or track some simple user data. Firebase is the thing that people are using now. So, you know, Google has a place in all of this. Um, I think that we're just super super early on Firebase Studio. It'll be interesting to do another video coming back to this in like a few months or six months and see how far things have come.
Okay, so uh, Lovable gave us some user O. We have a sign in and register flow. Let's register here. Registration complete. Please check your email to confirm your account. That's like a Superbase feature, uh, that by default they do user authentication. I just got—I'm not showing you my email now, but I just got on a different window—um, a confirmation from this app. Let's see if we can use that to sign in. Oh, maybe not because localhost. Okay, so by default, I think that you actually probably want to turn that feature off, the email authentication. But in any case, this is the product. So that's it. A little side-by-side, Firebase Studio and Lovable, uh, what it can do, what it can't do, what users might expect if they uh stumble upon this out in the wild.
I appreciate it, my man. I appreciate it. Thanks for taking us through sharing your, you know, I love hearing how you think about it and how you and how you think about prompting. Um, I'm going to include where to find you on social in the show notes so that people can follow you. I think you're trying to break a million dollars in revenue from all streams. You're building a software app. You're vibe coding. You're sharing the story. So, I'll include that. Anything else you want to leave people with?
Good luck. Have fun. Um, I think that it's still so early uh in AI land. I think that there are still so many high-lever opportunities that you can build apps—if not with Firebase Studio today, with Replit, with Lovable—to make real revenue, and um, yeah, just play around with these tools and uh have fun.
Yeah, I think that's a good point. I think um, you know, you have Lovable, you have Bold, you have Replit; those are sort of the more um friendly—let's say friendly—uh platforms for people who have ideas and want to see their ideas out in the world, but who aren't technical um or not super technical at least. So, um, I guess what's really cool is on the more advanced side, you have the Windsurfs, you have Cursor, now you have Firebase Studio, you have Tempo, uh Tempo Labs. Um, and uh there's just there's becoming this—it's almost like choose, you know, choose what feels right to you. Um, so encourage everyone to go and play with all these tools and see what feels right for you. Yeah. And you can build real businesses off of this. You know, I mean, you've seen plenty of your guests have done this. They might feel like toys, and you can definitely play around with them, but you can add a Stripe pay button and you can uh turn it into a real business. So, totally. Happy building everyone. Later, Y. Happy building. This.