Learn Firebase Studios in 21 Mins | Vibe Coding Gaming Apps

Here's a stat that will blow your mind. Did you know those mindless puzzle games that we all love to play whenever we're bored actually bring in $25 million a day for their developers? I'm talking about games like Tetris, like Candy Crush, Wordle, Sudoku, just to name a few. And did you know the top Sudoku app actually got 700,000 downloads in the App Store alone last month? And billions— would it be billions of people playing play these games every single day. It is a very profitable industry that is being overlooked. And today I'm going to show you how you can make your very own game application in the next 10-20 minutes or so using vibe coding. Vibe coding is the process of speaking to AI, telling it what kind of application you want to make. The AI will make it for you, then you tell it what you want it to revise, and the whole process repeats until you get your desired application. Now on this channel, I have already covered a few of the major vibe coding platforms. So they include Replit, Lovable, Bolt. But now the first tech giant have gotten in on the game, and I'm talking about Google. Google has just launched Firebase Studio, and it's a game changer because it is linked directly to Firebase. So platforms like Bolt, while they do a very good job of creating the front end, what it lacks is all of the back end. It doesn't allow you to create user authentication, database, Stripe management, payment systems very, very easily. But now with Firebase Studio, this changes the game because Firebase Studio is linked directly to Firebase as the backend, which allows you to create things like databases, user authentication with just a couple of clicks. Now, if you're new to my channel, hi, my name is Helena, and on this channel I focus on teaching you everything AI, automations, agents, you name it. So if these are topics that you like, please make sure you like and subscribe below. And now Well, without further ado, let's jump into Firebase and let's take a look at how we can make our very own app. So when we go to Firebase Studio, the website is firebase.studio, we get into this page, then we're going to click on Try Firebase Studio. Another thing I love about this platform is that it is also free. And I think Google is doing this right now because it will encourage more people to get into their ecosystem and use Firebase as the backend, which is how they will make their money.

They will make their money when you start hosting your app with them.

So right now we just had to simply describe what we want our application to do, and we can actually use ChatGPT to help us with this as well.

So I'm going to ChatGPT to write my prompt that I will put into Firebase. Here is a prompt that I wrote. I'm creating a Sudoku app using Google's Firebase. I need you to write this prompt for me. It needs to be concise, telling the AI exactly what I wanted to build, and I need you to brainstorm a name. for the app, the word Sudoku has to be in the name for SEO purposes. And now I'm using ChatGPT-03, which is the latest AI model from ChatGPT, to write this. And now it's going to write the prompt and it is thinking about it and I'll be back once it comes up with a solution. All right, ChatGPT has finished writing my prompt here and it is create a mobile Sudoku app with 3 difficulty levels, beginner, medium, and hard. Each puzzle uses a classic 9x9 grid with pencil marks, error highlighting, undo, redo, hints, and an optional timer. Let the players pause or resume, auto-generate new solvable boards on demand, and record their best times. Okay, so I'm going to copy this prompt, paste it over to Firebase Studios. I would just add 2 more things here. I would say, allow the user to start a new game whenever they want. Call the app Sudoku Swift. Perfect. And all we need to do is click on Prototype with AI, and the AI will get to work and building our application for us. So before it actually starts building, it actually comes up with a project plan first. It tells us the features that we're going to have in our Studio app, the color grid of our app, the layout, the typography, etc. So we can actually review all of this and see if we are okay with everything here, which looks good. Then I can just press on Prototype this app. And now it's going to get to work and see how quickly it is coding. Like, it just amazes me because there's just no human that can actually code at this speed. And when this finishes, I'm actually going to include a link in the description below so that you can actually try out this application for yourself as well. So like I said, like, the gaming industry is something that I I've never really dived into, and I didn't even realize how profitable this industry is. And these mobile game developers, they're monetizing these games in 2 major ways. One, it's with advertising. So when you're playing these games, you see an ad. Whenever you see an ad, click on an ad. This is one way that the mobile game developers are making money. The second way is with microtransactions. Like whenever I play Candy Crush, if I want to buy a bomb that will allow me to win that level, it may cost $0.50 or $0.99. Like these small microtransactions add up for the developers. And when they have millions of people playing every single day, they are actually ranking in like, I think Candy Crush makes like $600,000 every single day. It's, it's insane. All right. So now back to Firebase Studio here. Like we can see that it's coding very, very rapidly writing this code. It's currently doing the CSS and then it's going to do The HTML, the front end, and also linking it to the backend stuff as well. So I'll be back once it finishes coding the first version of our Sudoku app. Okay, so it's been about 2-3 minutes and we got the first iteration of our app here. And from here we can modify it to get it to be exactly what we want. There are a few tools that Firebase has that no other Vibe coders have. To help you speed up the process of modifying your applications. Now, the first one is the Select tool. So I had to go up here. You can see there's 3 buttons here. So the first one is the Select tool. When we select this, we can actually highlight the exact section that we want to fix up. So let's suppose that I want to fix up this section. This whole section is just too messy. There's too many buttons here. So I can just tell it to simplify the UI here. Looks Clunky. Move the timer to the top. Remove the undo and redo buttons. Remove check solution button and replace this with new Game instead. And then once I'm happy with my command, and again, I'm just telling it in natural language what I needed to fix up, then I can just press the Send Prompt button and the AI will go to work and fix everything for us. Firebase is the only platform that uses Gemini in the backend. To power all of the coding. The other platforms, I believe, do use ChatGPT to do all of their coding behind the scenes for them. So you just do this process back and forth. I find that you get the best result when you tell Gemini to fix one thing at a time. When you're like, fix this and fix this and fix this and fix this, and then you're not going to get the best result, right? So basically you just repeat this process over and over again until you get your desired result. So we can see here it did remove those buttons. The timer is now on the top, right? So let's suppose that I don't want the AI assistant tool because that would be cheating. Now I can just click on this and say remove this button and boom, it will, then AI will go to work and remove those buttons. Now that I showed you the select tool, There is also this tool here. Now, when you click on the squiggly line kind of on the bottom right-hand corner, it's called Annotate, you will get this toolbar pop up. It kind of looks like Microsoft Paint, and basically you just need to describe what's not working, and then the AI will fix things. So like, I can tell it, uh, there's No numbers on this Sudoku game board. Please work the logic behind the game and ensure that the game is functional. And then I can send the drawing out to Gemini to get it fixed up. So The 2 differentiators in terms of the Vibe Coding platform that Firebase has that other platforms do not have is the ability to select different sections and tell the AI, like, just fix this section. In other Vibe Coders, you had to be like, look at this section here, and hopefully the AI knows exactly what section you were talking about. And then the annotate tool is also super cool. So you can Draw circles, point to certain sections. Also just like say, put a picture here, add in the picture from your phone, or you can even add in text. So if I want a specific text to be displayed somewhere on my app, I can actually do that as well. I just click on the text tool. Let's change this color from white to, let's say, green. Actually, let's do the brown color. And then I'm going to click on that section where I want this text to be placed. And I'll put Solve Your Stress Away. And let's actually make this text a little larger so we can read it. Perfect. Now, now that I have placed this text onto my canvas, I just send the drawing again into the Sudoku app. And now Gemini is going to do the work and add in that text into my app. Like, I hope you guys are seeing how cool this is because this used to be things that takes like hundreds of hours to go back and forth with a developer telling them what you want in the UI. And it doesn't just magically appear because what looks simple to us is actually hundreds of lines of code potentially for the developer. So these changes could take a very long time. I actually used to work at IBM in app development. So this is things that like the UI designer would design, give it to developers, and then rounds of these changes could take a very long time even if you're using Scrum project management. Okay, so this is actually a completed version that I created earlier, and I just want to show you all of the steps that I took to get to this step. In terms of vibe coding, like you really want to take it one step at a time because if you include too many things in each of the instructions that you want the AI to fix up, it could just mess everything up. So basically it started with a basic version and I told the AI to like modify the colors. Then I told it to include more games into this because originally it was like one static game for every single level. And you can see whenever I give the AI an instruction, then it tells me what it's quote unquote thinking and its plan to modify And get me to exactly what I wanted to do. So you can see here, I gave it one instruction, remove the undo and redo button, and it did that. And then it went on to say like, whenever you press a new game, it would actually take me to this screen where I can choose a game based on the difficulty level that I want. And then after that, I told it that whenever I press on new game, it would actually give me a confirmation to confirm whether I want to start a new game or not. So I just went back and forth with the AI until I got the exact result that I want. Some tools that can make it easier for you to vibe code include like giving the AI a screenshot like I have here, telling it exactly what you don't like. You could also just use a select tool like I said earlier for this as well, or the annotate tool that you can find down here. Some other things that I want to show you about Firebase is that you can actually go into the code view. So if you're like, it's actually easier for me to just see the code and modify the code from there, if you're like a developer, then just go up here to the top right-hand corner and click on Switch to Code, and you'll be able to see all of the code that's being generated inside of the Studio, and you can make modifications from here. Now, one thing I will point out is that Firebase Studio is still in beta, and the only language language that it's coding in is Next.js, which means that it's not coding native like iOS apps, which is written in Swift. So there's still limitations to the platform the way it is today, but it is still very promising technology. So you can see here in the studio, you can see all of the code that's generated, and you can go in here and modify any of the code components that you want. You can even see the application that's being generated here. You can also click on the Gemini tab and start asking Gemini what it is that you want it to fix up. So essentially Gemini is being built into this entire coding studio, which allows Gemini and Google to also compete with tools like Cursor as well. So once you're happy with everything, just go up here and click on Publish. And then you can, because I have published this particular version before, I can create a new rollout. Once you create a new rollout, you will actually notice that you have an additional button here that includes the name of your application. It's not here unless you have published your application at least once. So once I click on this button though, it will bring me to this page that gives me additional capabilities. So if I wanted to add in authentication to my app, it's one click. Like if I want to add in backend database storage to my app, again, one click. And you can see there's so many different things that I can now do inside of my application. And what's really also cool about this is the extensions. So if I want to link this to my Stripe, to my Mailchimp account so that everything's integrated in my app, this used to be a process that's very, very complicated. But with Firebase, this is just a couple of clicks here. So if I go into extensions, I can see there's a whole list of extensions that I could include inside of my application. So Stripe is here. Mailchimp. You can see there's so many different ones. There's hundreds of different extensions that I can also add into my app with just a couple of clicks. Let's say that I just want the Stripe integration to be able to charge for my application. I just click on install and I just have to select the project that I want to link this to. And then I have to follow all the instructions here, give it the right permissions, and then in the end I have to link this to the specific API key of my Stripe account. When all of this is finished, then your application will be successfully connected to your extension. And in terms of authentication, so what we can do is we can create these project shortcuts like you can see I have done here. But to find these different things that you can do, just expand on Build, You can expand on Run, you can expand on Analytics, and you can expand on AI to see all of the capabilities behind the scenes in Firebase. So I can just select on Authentication under Build, and you can see once we do that, that there are so many different sign-in methods that you can include. And again, it's just like one click. Like if I wanted email and password, I just had to click on this, and click on enable. And now whenever someone signs in with their email and password, now I can store that person inside of my authentication in my app. How cool is that, right? And you can also add in if you want to allow the user to log in with their Gmail, with Facebook, Apple, GitHub, etc. So this is definitely like one really cool feature of Firebase. Now going back to our app here, let's switch it to the prototype view again. The last couple of things I want to show you is that you can click on this button here to open your app in a new browser to try. And you can see that I have my app here. It has a login and you can see here I can log in with the test email that I have. And then it allows me to choose the level of the game that I want to play at. It has the timer, difficulty, number of mistakes, and I have all of these different settings at the bottom. And this whole entire game was created using no-code, like by me, by myself. Like, this is incredible. I even have a dark and light mode here as well. This was all done with vibe coding. I mean, It still leaves me speechless sometimes that, you know, now we have the ability to create entire applications using just AI. Like, if you have ever tried to create an app using just code alone, like, you will understand what a big incremental improvement this is. And then the last thing I'll show you here is you can click on this button here, which allows you to try this app out on your mobile as well. So you have to make sure that you make the preview public by clicking here. Then you will scan this URL with your phone and then you will be able to see your application on your phone as well. A couple of last things here. Going back into the Firebase console, you can click on the gear setting and then go into your project settings here. Go into your integrations and integrate this with your Google Ads, and then you'll be able to display ads onto your apps, which allows you to start monetizing them. And it's super easy to set yourself up with Google AdSense. You can also track the performance of your apps with Google Analytics. So this is like one really great benefit of Firebase is because it's already linked into all of the other Google tools, which gives you everything in one place. And because it's integrated, it's just a couple of clicks to link all of your accounts together. And then you can also add in or remove users from your account, and you can host your app all within Firebase already with their hosting provider. So I'm going to include a link to this Sudoku app so that you can try it out as well in the descriptions below. If you enjoyed this tutorial, please make sure you check out my free AI and automations course below as well. I will walk you through the 4 ways that you can cash in with AI today. I'm going to walk you through how to build your own AI automations, agents, as well as software.

So please make sure you check out that free course below as well.

If you got anything out of this video, please make sure you like and subscribe for more tutorials like this and give Firebase a try. This is not just limited to puzzle games. You can use this technology to create any kind of application that you want, no matter which niche you are in. I'm sure there's dozens of SaaS ideas that is available to you. So if you create one of these tools that will solve one specific pain point for your target market, you can either monetize that tool or use it as a lead gen, give it away for free. For example, if you're in the fitness space, maybe you can create a meal tracker or a meal plan generator app for your potential clients and give it away for free as a way to generate leads. Like the ideas and the possibilities are endless, no matter who I speak to, I, within an hour of speaking with them, I probably have like 5 to 10 different ideas for them as to what kind of SaaS that they can create. And now that it's easier than ever to create SaaS, it just makes me really excited about the future and where AI is going to take us in the years to come. All right. So that's it from me.

Love you all.

Make sure you sign up for my free course and I'll see you guys next time.