Building a Full-Stack Application with Firebase Studio

In this hands-on tutorial, you will build a full-stack web application using Firebase Studio.

What You'll Learn in This Codelab

Basic usage of Firebase Studio
Troubleshooting methods in Firebase Studio
How to build a full-stack application using Firebase Studio
How to integrate AI features into your application using Firebase Studio
How to deploy an app created with Firebase Studio to a Firebase environment

Final Output

You will develop a diary app with an AI proofreading feature as shown below. (Since generative AI is used, the exact output may vary.)

Firebase Studio Final Output

The technology stack is as follows:

Technology Stack

Hosting: Firebase App Hosting
Database: Firestore
Authentication: Firebase Authentication

Prerequisites

You have a Google account

Open https://studio.firebase.google.com.

Enter a prompt like the following:

Please develop a diary app.
Add an AI proofreading feature that allows users to proofread their entries before saving.
Authentication and database connection are not needed at first; temporary storage in memory is sufficient.

Firebase Studio First Prompt

After a while, the app blueprint will be generated. Customize any parts you'd like, then select "Prototype this App" to start generation.

Firebase Studio Blue Print

If you're asked for a Gemini API key, create one from the following site:

https://aistudio.google.com/api-keys

Firebase Studio Gemini Api Key

The web application will be created.

Firebase Studio First Output

Resolving Errors

Here's how to resolve errors when they occur. You can check error details from the icon in the lower left corner.

If you open the error and see a Fix Error button, selecting it will proceed with fixing that error. Firebase Studio Fix Error Button

If the Fix Error button is not displayed, simply copy and paste the error content. Firebase Studio Fix Error Copy And Paste

Restoring to a Previous State

If errors occur and cannot be fixed, it may be better to restore to a previous working state.

Checkpoints are created for each user message, so you can restore to a specific point by selecting the Restore button. Firebase Console Restore

Effective Prompts

If the generated results are not as expected, you can adjust your prompts by adding details or providing specific instructions. Refer to the official documentation Refining prompts to improve response quality for guidance on making revision requests.

Add constraints: Specify constraints regarding the UI, data model, or functionality.
Provide examples: Show examples of how users will interact with the app and what data will be displayed.
Use keywords: Use keywords to describe features that the LLM can associate with the required output class. For example, you can use Material Design in prompts to indicate that the app should comply with Google's design standards.
Request specific changes: Request specific changes to the generated code or blueprint. Add each feature request in separate requests.
Ask the model to reason: If you're having trouble getting the desired result, try asking the model to reason through the prompt. For example, you can request: "Think step by step. I want to create an input box for a task app. It needs to include an ‘Add Task' button and a ‘Cancel' button."

Let's try requesting some simple customizations. Here are some examples:

Change the colors used in the application
Change the app name
Modify specific text

Changing the Colors Used in the Application

Send the prompt below.

Change the main color to a soft green.

Firebase Studio Before Change Color

Firebase Studio After Change Color

Modifying Specific Text

Send the prompt below.

Change as follows:
- Improve with AI → AI 添削
- Save Entry → 保存

Firebase Studio Before Change Text

Firebase Studio After Change Text

Send the following prompt to add authentication and database functionality:

Please add authentication and database connection with the following specifications:

- Authentication: Firebase Authentication
  - Email and password authentication
  - Features:
    - Sign up
    - Login
    - Logout
- Database: Firestore
  - Diary storage path: users/:userId/posts/:postId

Note: The Firebase Studio official documentation states: "Tip: The app prototyping agent can add Cloud Firestore and Firebase Authentication to your app during the iteration phase, rather than in the initial app blueprint." Therefore, we add authentication and database connection at this point rather than in the initial prompt.

Sign up and post a diary entry to verify the functionality. Let's confirm that it's actually connected to Firebase Authentication and Firestore. First, select the orange-framed area in the image below to navigate to the Firebase Project.

Firebase Studio - Open Firebase Console

In the Authentication menu, you can see that the signed-up user information has been added.

Firebase Console Authentication

In the Firestore menu, you can confirm that the posted diary content has been saved.

Firebase Console Firestore

Deploying to a Firebase environment allows other users to use your app.

Press the Publish button.

Firebase Console Publish

Link to Google Cloud Platform billing information. This is a required procedure to use Firebase App Hosting, but it can be used within the free tier up to a certain scale.

Firebase Studio Link To GCP Billing

Once deployment is successful, you can access the app from the generated URL.

Firebase Studio Complete Deployment

This concludes the hands-on tutorial. If you have extra time, try customizing further. Here are some customization examples:

Display diary entries in a sidebar list
Calendar view to access diary entries for specific dates
Generate diary titles using generative AI
Generate summaries for specific periods (weekly, monthly, etc.) using generative AI
Control public/private visibility of diary entries
Follow feature between users

For those who want to understand Firebase Studio more deeply, you can find more detailed information from the following links: