Video ID: Rd6F5wHIysM
YouTube URL: https://www.youtube.com/watch?v=Rd6F5wHIysM
Added At: 13-06-25 21:15:50
Processed: No
Sentiment: Error
Categories: Ai, Technology
Tags: google, firebase, studio, minutes, want
Summary
Transcript
I tried Firebase Studio for you. So, here's the Cliffnotes version to save you the past couple of weeks that I spent learning and testing it. Firebase Studio is Google's version of a web-based AI app builder that's meant to be a competitor to other web-based AI app builders like Lovable, Replet, and Bolt. So, when Firebase Studio first came out, there was a lot of mixed reviews about it. Some people were being like, "Fire Studio I just killed all of the other vibe coding AI builder apps." Or people saying like, "Don't waste your time. in Firebase Studio is cooked. It was all over the place. So, I was just like, I don't really know what's happening about this, but I guess I'm just going to have to try it out myself. And you know what? I'm just going to give you my verdict right now instead of beating around the bush. Firebase Studio did not kill all of the other AI app builders, but it's also not completely useless either. I would rate it as decent, like five out of seven. It is true that Firebase Studio has a slightly higher learning curve than your Bolt Replid were lovable, but once you get the hang of it, it's actually all right. decent and it also does have the major advantage of being free. So to me, I think it's worth learning. Plus, this is a early release and I do expect it to get a lot lot better in the next few months. In this video, I'm going to explain what exactly is Firebase Studio and then actually use Firebase to vibe code an app, an old school Pokemon inspired productivity app to be specific. This will give you a chance to really get to know what it's like to develop within Firebase and also be able to show you features along the way. Okay, so what is Firebase Studio? Firebase Studio is a user-friendly web-based AI app builder. Firebase Studio markets itself as the full stack AI workspace. Accelerates your entire development life cycle with AI agents. Build backends, front ends, and mobile apps all in one place. Basically, a userfriendly AI based app builder that is built on top of Firebase. And there are three major reasons why there is so much hype surrounding this product. The first one is that it is a Google product which means it is the first fake tech company funded AI app builder and people had high expectations. Second reason is that like most other Google products it is marketed as being free to use while its competitors are at around $ 20 to $30 minimum per month. And the third reason is that Firebase Studio is built on top of Firebase which is Google's back-end platform for building web and mobile apps. This makes Firebase Studio seem really promising because you see the problem with these current web- based AI app builders is that they can come up with really beautiful frontends but then just completely crap out when it comes to back-end stuff like databases, authentications or user management. So theoretically, if Firebase Studio is built on top of a back-end platform like Firebase, then it should be able to do backend stuff too, solving the biggest issue that these app builders face today, a truly full stack app builder theoretically. Now let's actually try it out. All right. So, here is the landing page. And if you click get started, it will lead you to this very familiar looking interface. It says prototype an app with AI. And you can just put a prompt in. They have some of these default prompts like tipping calculator, recipe generator, but that's just boring and not very realistic. Like, I don't think anybody is super excited to build another tipping calculator. So instead, we're actually going to build something that is useful, which is an old school Pokemon inspired productivity app where you're competing against an AI rival like Red from Pokémon by setting daily goals and completing them to earn XP. From my experience with AI app builders, if you can clearly think through what you want your end app product to look like, you generally get much better results. So to help me flesh out this prompt and get much better results, I'm going to actually use Chat GBT to help me think through what I want the app to look like. [Music] So, in Chachi BT, I put this prompt and I say, "I'm looking for a gamified pixel art app where users set daily goals and earn XP for completing them. If they slack, their AI rival gains XP inspired by pixel art games like Red from Pokémon." I wrote that users should be able to choose to customize the AI rival and task that users would do like studying calculus for 50 minutes, drink eight glasses of water, gym for 1 hour, and then yeah, I just wrote like, "Help me think through the rest of the apps, for example, like game mechanics, blah blah blah, all these things." I also included an example product requirements document that I've used previously that has gotten really good results. So, I'm not going to go through in detail the rest of this prompt because I actually made a video which I'll link over here in which I explained the best practices for vibe coding applications. Anyways, I just do this blah blah blah like I talk to chatbt to refine a lot of these things, understand game mechanics and ultimately I got a prompt specifically for Firebase Studio that includes the major features of the application. Specifically, I did ask it to use Firebase backend stuff like Firebase Fire Store to store XP as well as Firebase Cloud Functions since, you know, that's why we're using Firebase to begin with. And I copy paste that into here. And I'm also attaching this image, which is a mockup of the main features as inspo for Firebase Studio. Now, we click prototype with AI. While it's doing its thing, I do want to point out that it does give the option for you to import a repo as well as a lot of these different types of frameworks that you can choose when you're starting to code an app. And this is just one of the many features that make Firebase Studio a lot more of a robust product compared to the other AI app builders. Anyways, going back here, Firebase Studio gives us a plan called Pixel Progress and it says that has its main features like a main screen UI that displays user and rival XP with numeric values, daily reset like task that reset at midnight as well as passive XP gain. An AI tool is used to calculate how much XP the rival should gain passively for each unchecked task. It has like the style guidelines as well with the color layout, iconography, and animation. And here you can chat with Gemini to tweak this plan. Of course, since this is a Google product, all the models are also going to be Gemini based models. It got the color scheme from the inspo mockup that I did. But for example, I can say like I want to include the color purple. I don't know. It's not really showing up, but it does say here that dark purple 4 A148C can be used sparingly for accents or interactive elements that need to stand out. I guess good enough. We can click prototype this app. And yeah, it's going to start doing its thing now and creating all the files. Hopefully, this works. And you can see that it's using Gemini 2.0 Flash. Um, so that's why things are moving really, really quickly. I'll actually show you in a bit how to change the model to something like Gemini 2.5 Pro, which you're going to get much better results for. But yeah, let's stick with this for now later. Okay, so it's running into some issues and it's also asking me to input a Gemini API key. You can just click autogenerate here. Honestly, this is also kind of weird cuz technically it doesn't need a Gemini key. It's not like an inherently AI app, per se. And in the meantime, let's see what the issues are. Okay, server side exception has occurred. Okay, cool. Gemini API key is updated and it says that I've detected an error. Want me to fix it? And you can just click fix error. And just like a true Vibe coder, no idea what the hell the error is, but maybe it will fix itself. I'm going to go take a nap. A few moments later. Okay, looks like our app is ready. And that honestly did not take that long. That was around 3 minutes. Yeah, Gemini Flash is very fast indeed. Okay, so this is what we got as the first iteration. Progress tracker, your XP, rival XP over here, daily task, no task for today, add some goals, and we have a timer here. Time until daily reset, unrival gains XP in 1 hour. So, looking at this, it looks pretty. Let's see if it actually works. Enter a new task. vibe code app for 50 minutes and put XP like I don't know like 20 XP. Add goal. And let's add another goal. Drink eight glasses of water. 15 XP. And if we click here, it looks like yep, you do get your XP does increase over here. And if you drink eight glasses, then it does increase over here as well. Okay. So, for the timers that are here, it looks like the time until daily reset is 5 hours 54 minutes and 39 seconds. And this is actually correct because within the prompt I did write that I wanted to reset every day, right? And currently it's 6:05 p.m. I'm on uh GMT + 8 right now in Hong Kong. So I guess I got that right. It does say rival gains XP in 1 hour. And I I actually like want to see this happen as opposed to wait for an hour. So what I'm going to do make rival gain XP increments of 1 minute. I just want to see if it actually does that or not as opposed to waiting for an hour. Also, I feel like it probably won't do that in an hour because this is not actually counting down. We'll look at the code in a little bit, but that is my guess. It says as modify trigger rival XP update to calculate award rival XP based on minutes pass instead of hours. The rival now gains one XP per incomplete task every minute. While it's doing that, I want to show you a cool feature that Firebase Studio has. So, right now, this is like obviously web- based, right? But if you click over here, you can actually click like make preview public and then there's a QR code over here that you can actually take your phone and scan it using your camera app and you can see what it looks like on the phone as well. So I will do that and here you go. It is currently loading. One of the big benefits of web-based app builders is that you don't need to set up all of these processes yourself. Okay, so I wonder if you can see that. You can see on mobile it honestly looks pretty good as well. Let's refresh this now. And something is not going right over here. Gains XP in 0 0 seconds. That doesn't look right. We can wait a minute and see if it actually gains XP in 1 minute. Seems like there's some sort of logic issue that is going on over here. So, I'm actually what I'm going to do is I'm going to go into the code view shortly to take a look at this actual file and see what's going on exactly there. But let's actually leave that for now. I want to show you guys some cool little features that Firebase has when it comes to front-end design stuff. For example, there is this select button which you can click and you're able to select specific things that you want to modify. Like say for example, this button, right? Like I can say something like change this button to purple instead. Refresh. And there you have it. Pretty cool, right? Another thing that you can do is they have this annotate scribbly button thingy. And this allows you to like, you know, literally annotate and draw stuff that you want to be changed as well. Like here, maybe what I want to do is actually add a little footer. And let's make it like, I don't know, green. And write, "Don't let your rival win." Maybe make that a little bit bigger. or something like that. And let's draw some lines as well. I think I might be making this more ugly, but you know, proving a point here. And I'm just going to write here, add these components. Send drawing. Okay, it did say don't let your rival in, but it didn't add my line. So, I'm just going to try again. The secret technique of vibe coding. Just do it again and hope it works this time. Add the line under progress tracker. Yay, it added this line. Wonderful. Let's now actually switch over to the code editor. This is a pretty cool feature as well. I really like how it has this VS Code UI for those of you who want to dig deeper into the code. This also really showcases to me that Firebase Studio really just has so much potential. It has this code view which is basically the interface that you would be getting with your cursor and your winds surf here that is built into this product which means that you can go from doing everything completely with no code and then also being able to very easily dig into the code itself. I don't think there's any other product out there that is both web- based and is able to allow you to be this flexible. Let's now take a look at what is happening here. So here we have the preview and then next to it we have Gemini where we're able to chat directly with Gemini. And first thing I'm going to do is actually switch the model. Here we were on Gemini 2.0 Flash which is a more lightweight fast model. I'm going to switch that over to Gemini 2.5 Pro and get an API key. Click create API key. Add a project and then create API key. Copy this. So don't actually show this. I'm going to disable this by the time this video goes out. Don't show other people your API key. Can copy this and paste it in here. And wonderful. Now we have Gemini 2.5 Pro Preview, which hopefully will give us better results. First thing I'm going to do is ask it to explain the structure of this project cuz I want to know what is actually being used for the front end and the back end. Specifically, is Firebase actually being used for the back end or not? Explain the project structure and what frameworks are being used. specifically what is being used for the front end and what is being used for the back end. Please reference the corresponding files. Oops. I actually need to use the pro experimental. So I'm going to do that custom model and then just type in this and try again. Okay, let's see what we have. So what it says is that it has the framework. So it tells you what the front end is built on. Nex.js blah blah blah all of these things. primary framework, TypeScript, Tailwind, CSS, these are all things make sense. By the way, if you're someone who doesn't know how to code, don't panic. I actually really recommend that you go through this process of understanding at least like the major frameworks of what is being built into your application. Like you don't need to actually code these things yourself, but just having the knowledge of how frameworks are being fit together. Trust me, it would be so beneficial to you when you're trying to build your application and piece things together. again like I have my vibe coding video which I'll link over here and it goes into more detail about how it is that you can learn about these things while you're vibe coding even if you're not technical. Okay, so it does say that it has the backend which is firebase fire store likely as a database or back end. Okay. Um seems like there does and there's also an next.js on the server side. So it provides a backend capabilities code within server components and different project structures as well. So what I'm going to do is actually just like quickly check this. So I'm not going to go too technical. All I want to do is actually just quickly check this to see if the back end is in fact being stored or not and make sure it's not lying to me. So under file store.ts, we can see here that it has all of these things set up. But I do not believe that these are actually defined right now because if you go into so it's like it's supposed to be defined here, right? Process.M. So if we go to process or like m Yeah. So M.local, local. You can see that this is actually not configured properly. Right? So what I'm going to ask Gemini to do is configure the Firebase Fire Store and it says like okay to configure Firebase Fire Store I need a configuration details you got to go to your Firebase project console navigate there click on that blah blah blah you see configuration information over here and then I need to provide this myself. So obviously I can do this, but I do think that this is something that Firebase Studio really should be able to do because it is built on top of Firebase, right? So it really should be able to do this. For me, I'm like, that's not that bad. I can go do it. But for someone who is non-technical and if they're trying to build something like this, I think they would have a much more difficult time doing something like this. I hope in the next few months, Google will improve this and have a closer integration with Firebase itself, and it would really make this entire product so much more powerful. Firebase Studio is a starting point for you to prototype your AI apps, but as you can see, it does have its limitations. To take it a step further and create apps that have more scalability and more functionalities, as well as be able to use other models except for Google models and other types of back-end services um as opposed to just Firebase, you will need to update at some point to a full suite AI code editor like Windsurf, who I am very excited to say is the sponsor of this portion of the video. Windinsserve isn't just a generic code editor. In fact, it's not even just a generic AI code editor. It's specifically built with powerful context handling throughout the different services to keep you in maximum flow state. You write less, think more, and the AI works with you to bring your ideas to life. Windsor features their coding agent called Cascade, which guides you through any app it is that you want to build. It also has a full suite of other AI features that make it incredibly easy to write, preview, and deploy your code. after I started coding with Windsurf. I can't imagine coding without it. To get started by coding with Windinsurf, you can try it out for free at this link over here, also linked in description. Thank you so much Windsor for sponsoring this portion of the video. Now, back to the video. Next thing I want to do is go back to the logic where we talked about earlier about the rival gaining XP in a certain amount of time. So, I'm going to ask Gemini, let's actually move this over here so we can see it. I'm going to ask Gemini where is the logic that defines the amount of XP that the rival gains. So Gemini 2.5 Pro is a thinking model and it's kind of giving you its stream of thought telling you like maybe it's likely here blah blah blah and then it's actually like checking everything in order to identify where things are. So in short, the rival gains one XP every minute for each task the user has left incomplete. This logic is defined in this file over here. Let me actually change this to dark mode as well because I'm just like not used to the light mode. Ah, okay. I feel much better now. Take a screenshot. And I'm going to write here. It is not showing the rival gaining XP every minute. Based on the code, the intent is for the rival to gain XP every minute based on your incomplete task. Added an incomplete task and see if something's going to happen. As it suggests over here, the trigger rival update function has several console.log log statements that should indicate as well. And it actually did update over here. Speaking of which, we can actually open up a terminal. So, if we look at the web console over here, it looks like it is actually adding XP over time. And we can see that it is adding XP for the rival XP bar here as well. Very cool. All right. So, I guess it is happening. And this is more of like a UI issue. So, I'm just going to take a screenshot. Looks like it is updating the rival XP, but the timer is not showing correctly. It should be counting down from 1 minute each time. Okay. Update file. And it says that it changed things. So, let's see if it did. Okay. Well, it got the 60 seconds correct, but it's not counting down. All right. I'm just going to fiddle with this a little bit more. The 602 is there but it is not counting down. Okay. Update file. You can actually see it being updated in real time here. By the way, some other like things that you can do within Firebase Studio. Really similar to your Windsor in your cursor. You can use Gemini to explain selected code, add comments, and just like everything here. It has the full VS Code experience that's in here as well. Honestly, pretty impressive for a web-based free tool. says, "Rival gains XP in checking." It asks, "Watch the timer for a full 50 60 seconds. Does it ever change from 60 seconds or checking? We're just updated." So, it says that it is checking. Maybe it's because I didn't add a task. Let me actually do that. Maybe this will trigger it. Okay, let's add a task and wait for a minute and cross our fingers. Ah, yes. Patience is a virtue. Probably should have set it for like 1 second instead of 1 minute for better debugging, you know. Whoopsies. Okay, so updated to 1 XP. Now, it should be changing to 60 seconds. Let's check the console, the web console. Clearing periodic checks interval blah blah blah. So, it just says that the daily reset is not needed yet. Rival potentially gaining 1 XC for an minutes passed since the last Rival update. Okay, I think this part is just not going to be working. So, I'm going to fiddle around with it a little bit more. So, I'm not going to keep doing this in this video, but at this point, what I'm probably going to do is just go in here and actually like check through the code and ask it to explain to me step by step in order to debug and to fix this issue. I go through this process in this video over here if you are someone that is interested in vibe coding and wants to learn the best practices for doing this. But anyways, so we've gotten this far and I've shown you a lot of the Firebase features already. So at this point, there's a couple other things I do want to point out. The first one is that you can click on the bottom left hand corner and connect things to GitHub if you want. You can ask Gemini to go through the process with you to push everything onto GitHub. And once you do that, voila, it's on GitHub. And here you can download it if you want. And you can also just like take this code and use wind server recursor for example if you want. And the last thing I want to show you guys is the publish button. So once you're ready, you can go through this process. Publishing your app, linking to your Firebase project, uh linking your cloud billing account, and then setting up your environment. So you do need to pay for the hosting part, just FYI. Everything else is free after a little bit of time. And voila, there you go. It is now deployed and live on the internet. And there you have it. I hope that this was a helpful video in showcasing the major features that Firebase has. It actually has even more features that you can dig into as well. But what I hope you can see is that currently as it is, I do think Firebase Studio is quite decent, especially since it is free and there is just so much potential that Firebase Studio has. I can really see Google improving this over time and all of these like functionalities coming together to become a really really useful product. The way that I see Firebase Studio fitting into my workflow is that I probably will develop into the workflow. I don't think Firebase Studio will replace something like Levelable or Bolt, for example, because those are really geared towards people who don't have any coding experience at all. And that's kind of the preference that's there. While Firebase Studio, it's more of a Replet competitor in the sense that it does have that coding component to it. And I actually feel like it can be a lot better than Replet because it is built on top of Firebase. All in all, I think a solid, decent 5 out of seven product right now. I can really see it potentially being a 7 out of seven product in the future. Now, as promised, here's a little assessment to help you retain all the things and features that I talked about about Firebase. Do write your answers in the comments. Also, do let me know what do you think about Firebase Studio. Are you interested now in trying it out? And thank you so much for watching this video. I will see you guys in the next video or live stream.