Firebase Studio lets you create and launch feature-rich web apps without touching any code. You can quickly transform your ideas into working applications and get them online using AI-powered tools. Not only does it handle all the technical stuff behind the scenes, but it also saves your time so you can focus on designing what your app should do and how it should look, 

This tutorial is about how to use Firebase Studio to create a web app. It gives you a step-by-step walkthrough on accessing Firebase, describing your application, reviewing and customizing the blueprint, and testing and publishing your application. 

By the end of this tutorial, you’ll be able to:

• Access Firebase
• Describe your application
• Review and customize the blueprint
• Test and publish an application

Let’s dive in right away!

Step 1 - Access Firebase

Access the Firebase Studio console. Log into your account. Accept the terms and click ‘Continue.’

You will be greeted with a familiar interface—a dashboard asking you, ‘What do you want to build?’ under the ‘Prototype an app with AI’ section. 

Now, we want to point out a couple of things before moving on with a prompt. As you see, you can create a new workspace or import repositories from various sources. If you have codes lying around in other repos, you can import them using the links under ‘Start coding an app.’ 

Step 2 - Describe your application

Here comes the best part. Start describing your application in a prompt. You can use CoT techniques to write a prompt, however, we suggest you keep it simple and to the point. Be specific about features and functionality for best results. Use the following prompt:

Prompt:

Please create a pill and medicine reminder app. Include reminders, tracking and alerts. Create a clean but aesthetically pleasing interface with key insights into the medicine taking regimen.

Click ‘Prototype with AI.’

Quick tip: If you want to add pictures of apps that you want the AI to copy or use it as a design cue, you can upload images or sketches of the app design to help AI understand your vision and expectations.

Step 3 - Review and customize the blueprint

Firebase will create an app blueprint. You can edit or customize it to your needs. 

Click the pencil icon at the top right corner of the app blueprint screen. It will take you to an editing module where you can edit the blueprint, change colors, layout, iconography and animations. 

Click ‘Save.’ and go back to the app blueprint screen. 

Once you finalize the blueprint, click ‘prototype this app.’

In under a minute, Firebase will create the app for you. 

Firebase will ask you to provide a Gemini API key to finalize the app. Go to Google AI studio and click ‘Get API key.’

Create an API key for your firebase project and copy the key.

Go back to your Firebase screen. Paste the key and click ‘Continue.’

Firebase will finalize your app committing the code to a server. 

You can write follow up prompts to customize the app to your liking. Let’s say you want to add alerts tab to your app. The app lists all the alerts in a week. 

Prompt:

Create a tab for alerts. The tab will show all the alerts that happened during a week. Add options to erase all the alerts too. Also create a separate Alert section below the medication module.

Step 4 - Test and publish an application

Firebase Studio builds your app prototype for you, creating all the files you need. You'll get to see your app in action with working charts, forms, and navigation elements. If something goes wrong, just hit the "Fix the code" button and the AI will solve any problems automatically.

When you want to make more detailed changes to your app, just click "Switch to code" in the top right. This opens up a code editor that looks a lot like Visual Studio Code, where you can directly edit any file in your project yourself.

The code screen is easy to navigate. You can find all the files in one place. No need to write code yourself. Instruct Gemini to modify the code for you. 

Once you've finished building your app and you're happy with it, hit the "Publish" button in the top right. This will deploy your app online right away, so people can start using it immediately.

That’s it for this tutorial, folks. Firebase is an amazing tool for prototyping an app. The code is clean and easy to edit. You can use it as an early prototype of your app and build the details using the Firebase prototype as a base. Remember to experiment with Firebase. Keep editing the app until you’re satisfied.