How Google's Firebase Studio Is Changing App Development with Vibe Coding

Full video transcript

I don’t know if you’ve heard about vibe coding before, which is basically me prompting and telling an AI tool to create an interface, a prototype, mock up an app, and then start to build in additional integrations. There are tools out there that help you with this, such as Replit, such as Lovable, such as Bolt, and now we have Firebase Studio from Google.

If you’re not familiar with what Firebase is, we’ve been using it for our own Market Sauce platform development to essentially create the backend infrastructure for a whole lot of things in our app. We also use Google Documents, we use Google Drive, we use Google Sheets, we use Google for so many things in our business. We use Google Calendar and so many more different things from Google. And now Google just comes out with Firebase Studio, which is basically Google bringing the front-end prompt-facing generator to the table and saying now you can just vibe code with Google Firebase Studio, and you can also use Google’s Gemini for the API for AI integration and their backend systems and so much more. And it’s all inside of Google’s ecosystem.

This is powerful, guys. And I’m going to show you how you can get started with it super quickly by just going to firebase.studio, selecting getting started, and then you’ll create your account. Once you’re logged in inside of your Firebase Studio, you can create different workspaces, and I’m sure there’s going to be a number of tutorials that will give you a super in-depth overview of everything that you can possibly do inside of here. But at the end of the day, what you can do is you can use prompting and instructions and guides to start to create an initial front-facing interface.

You can see a few examples here on my screen right now, like Unicorn Stackdown, Pitchcraft AI, Chillgap, Hustle Deck, Syndicate Impact, using Firebase Studio to prompt. What I’m going to show you is a project that’s completed, and then I’ll show you how to basically just get started with the vibe coding on the prompting side to create the front end and how you can start to iterate and conversationally adapt the tool to do what you need it to do.

So first thing you’re going to do, once you’ve already created a workspace, is Google’s going to do all this stuff to set up your environment, do a lot of what you would need to do if you’re setting up a traditional software development environment, keeping it inside of the constraints of Google. And so it’s taking just a minute to load this project that I’ve already created. I’m going to show you how I can jump back into this project and start to continue to edit and iterate on the project right here. So we see it’s setting up, initializing the environment, and then we are ready to go.

And now this is going to be the interface that I’ve already begun building. On the left hand side of my screen here, you’ll see the setup for the app that is loading right now. And on the right side, what you’re going to see is the instructions that I’ve given this app. And so what I did when I was playing around with this idea, I said, I want to create an app that is a side-by-side version of the game of Tetris, but with a twist where the game is played by users who are mythological unicorns who are trying to stack ideas on top of each other to destroy an evil AI virus with their crazy ideas.

And so what it did was it created a blueprint from my initial prompt. It was a very simple prompt that I provided, and then it created a blueprint. And that blueprint was here to say Unicorn Stackdown, what are the features that we want: the crazy idea blocks, the virus interface, unicorn avatar and animations, the idea generator.

Now you can see I’m literally using my keyboard right now and I’m playing my version of Tetris right here. And I was inspired to create one that was Tetris because of a Netflix show that just came out that was on the origin story of Tetris. And so I wanted to give it a shot. But you can see it’s moving different things around here as I’m adjusting my screen and I’m playing the game right now, and I see it’s getting stuck.

And so what I’ve done is I’ve created this initial interface for a game that I can start to prompt back and forth with and tell it additional instructions. And so I actually told it to do a little bit of modifications on the right side, and then it began to code and edit the code and do all the coding in the background. But you can see the game is running on this front side.

And so basically what I could do from this point is describe another prompt for another thing that I want to incorporate. So I’m going to say, just for example, now what I want you to do is on the right hand side of the screen, add a timer for 1 minute, 2 minutes, and 3 minute intervals that will be the timer that will run each particular round so that we score points inside of the timer. And so now again, giving it this prompt and just working with AI from a conversational standpoint, it’s doing a lot of the coding and the stuff that you can see here in my screen to make what I told it to do actually get done.

Now, what you also have to take into consideration when you are developing any sort of app or software is there’s going to be bugs. Errors are going to come up, and there’s going to be continued innovations with AI that will help you with bugging and troubleshooting and documentation and that sort of thing. You can see it just made one update to it. Not perfect. It’s going to take some work for me to get this sussed out to the way I want it to look. But now we see start game, 1 minute, start game, and now the timer is working. You can see here, clear as day, the updates were made in real time.

And now I can go through and I can play my version of Tetris right here inside of Google Firebase Studio. And so it’s a very simple application for what that would look like, but I’m going to show you another example of how you would go and get started with something right out the gate. And so you can just jump in. The best way to get started with these tools is to jump in and learn and go and read some of the documentation that Google Firebase Studio has. I’ll link that below this video.