Vibe Coding - Using Firebase Studio

Firebase Studio is a very useful where we want a full fledged production ready application. We can use Firebase as backend, database as well as user authentication modules.

Step 1: Describe complete application in prompt

Open Firebase studio, enter a prompt describing the application. You can mention multiple pages in the beginning itself.

For example, set following prompt −

Create a simple online idea sharing portal. It should authenticate user so that employees can register and login. Once logged-in, employees will log their idea with title, detailed description and benefits of the idea. All submitted ideas should be available on the home page of the portal. 

Step 2: Refine App blueprint

Once we submits the prompt, firebase studio generates the app blueprint for review purpose with details of the feature outlines, styles and technology stack to be used by AI. At this moment, we can refine the blueprint by providing feedback to ensure that end product meets our requirement.

For example, set following prompt −

Add review and rating options to the idea section.

Step 3:Generate prototype

Once prototype is ready, you can click "Prototype this App" Button. Now Firebase Studio starts processing and a working prototype is generated. Once processing is complete, you can see the interactive preview of your app.

Step 4: Editing live prototype

In Conversation Panel, we can ask AI to make changes to interactive prototype. For example, ask for visual updates, add new feature, remove a feature etc.

For example, set following prompt −

Make rating button functional. Add a favourite icon to the idea. Creates a new page -'My Favorites' to show selected ideas.

Step 5: Deploy the App

Firebase Studio utilize Cloud Run to deploy the prototype over cloud in a single click flow. As application is built targeting the production, it is scalable and can handle traffic from day one.