Build & Launch a Full-Stack Web App With Google AI Studio

You'll take an app idea from a prompt to a real working web application with:

User authentication

Persistent data

Optional file uploads

Secure user-specific access

A live production deployment

A GitHub-based update workflow

The example app can be a simple Client Workspace where users create an account, manage projects, and optionally upload files. The important part is not the example app itself. The workflow can be reused for many different web apps.

Describe Your App

Open Build mode in Google AI Studio. Start by defining:

What the app is

Who it is for

The core features it needs

How it should look

What needs to persist in the backend

Answer the file-upload question first. The prompt below follows your answer, and later steps reuse it.

Does the app need file uploads?

Yes

Users upload images, documents, videos, or other files.

No

The app stores data, but users do not upload files.

Build the App With File Uploads

Build the complete first version with Firebase Authentication, Cloud Firestore and Cloud Storage connected to real data.

Build a production-ready web app called {{APP_NAME}} for {{TARGET_USERS}}. The main purpose of the app is: {{PURPOSE}}. Users should be able to: {{CORE_FEATURES}} Design: {{DESIGN_DIRECTION}} Use Firebase as the backend. Add Firebase Authentication for user accounts and Cloud Firestore for persistent application data. Use Cloud Storage for user-uploaded files. Each authenticated user must only be able to access their own private data. Create appropriate Firebase Security Rules for the data structure you build. Keep sensitive API keys and privileged operations on the server side. Build the complete first version of the app and make sure the frontend is connected to the real backend rather than mock data.

App name

Client Workspace

Who is it for?

Freelancers and their clients

What is the app for?

Give freelancers and their clients one place to manage project work

What should users be able to do?

Create projects, add notes, track status and upload files

Design direction

Clean professional dashboard, light interface, simple navigation

Build the App

Build the complete first version with Firebase Authentication and Cloud Firestore connected to real data.

Build a production-ready web app called {{APP_NAME}} for {{TARGET_USERS}}. The main purpose of the app is: {{PURPOSE}}. Users should be able to: {{CORE_FEATURES}} Design: {{DESIGN_DIRECTION}} Use Firebase as the backend. Add Firebase Authentication for user accounts and Cloud Firestore for persistent application data. Each authenticated user must only be able to access their own private data. Create appropriate Firebase Security Rules for the data structure you build. Keep sensitive API keys and privileged operations on the server side. Build the complete first version of the app and make sure the frontend is connected to the real backend rather than mock data.

App name

Client Workspace

Who is it for?

Freelancers and their clients

What is the app for?

Give freelancers and their clients one place to manage project work

What should users be able to do?

Create projects, add notes and track status

Design direction

Clean professional dashboard, light interface, simple navigation

Run the Build and Enable Firebase

Run the prompt When Google AI Studio asks permission to enable Firebase, review the project and location, then enable it Let AI Studio finish the initial build before making cosmetic changes

Goal

Frontend + Firebase project + Authentication/Firestore integration.

Check Authentication

Open the Firebase project connected to the app and check which sign-in provider the app currently uses.

Open the Firebase Console

Select the project connected to your app.

https://console.firebase.google.com

If the app needs email and password accounts:

Authentication Sign-in method Email/Password Enable

Do not enable providers you do not actually plan to use.

Check the App's Data Storage

Firestore applies to every app. File Storage follows your file-upload answer in Step 1.

Firestore

Confirm that Cloud Firestore exists and that the app is storing real data rather than temporary browser state.

File Storage

If the app needs images, documents, videos, or other user files, set up Cloud Storage.

IMPORTANT

Cloud Storage for Firebase currently requires the project to use the Blaze pay-as-you-go plan. That does not mean every project will necessarily generate a charge, but billing must be enabled.

Create the storage bucket and keep it in production mode. Do not loosen the Storage rules just to make uploads work.

Tell AI Studio What Changed

After making manual changes in Firebase, return to AI Studio and use this prompt. It follows your file-upload answer in Step 1.

Connect the Firebase Changes

Tell AI Studio which provider you enabled and that the Storage bucket exists, without weakening the security rules.

I updated the Firebase configuration for this project. I enabled {{AUTH_PROVIDER}}. I also created the Firebase Storage bucket. Update the app so these services are correctly connected. Keep the existing working functionality unchanged. Make sure authenticated users can only read and modify their own data and files. Do not weaken the Firebase security rules to solve access errors.

Which sign-in provider did you enable?

Connect the Firebase Changes

Tell AI Studio which provider you enabled, without weakening the security rules.

I updated the Firebase configuration for this project. I enabled {{AUTH_PROVIDER}}. Update the app so these services are correctly connected. Keep the existing working functionality unchanged. Make sure authenticated users can only read and modify their own data and files. Do not weaken the Firebase security rules to solve access errors.

Which sign-in provider did you enable?

Test the Core User Flow

Test the app as a user instead of continuing to change the design. Create a test account and run through every important user action. For the example Client Workspace:

Sign up

Sign out

Sign back in

Create a project

Edit it

Refresh the page and confirm the data remains

Delete it

Upload and remove a file

Test With a Second Account

Then create a second account. This test is important.

Account B cannot see Account A's private data or files

If Something Fails

Do not give AI Studio five unrelated bugs in one prompt. Fix one problem at a time with this prompt.

Fix One Problem

Describe one broken feature so AI Studio fixes the root cause without touching what already works.

There is a problem with {{FEATURE}}. Expected behavior: {{EXPECTED_BEHAVIOR}} Actual behavior: {{ACTUAL_BEHAVIOR}} Diagnose the root cause and fix this specific issue. Preserve the features that are already working. After the fix, verify that this user flow works correctly.

Which feature has the problem?

Creating a project

What should happen?

The new project appears in my project list

What happens instead?

Nothing appears, and the list is empty after a refresh

Fix blockers first, then continue testing.

Goal

Do not move to deployment until the complete core flow works in AI Studio.

Run the Production-Readiness Check

Before publishing the project, ask AI Studio to inspect the app as a production application.

Production-Readiness Check

Check auth, data persistence, private access, rules, secrets and the production build, and fix only real launch blockers.

Perform a production-readiness check for this web app. Check: - Authentication works correctly - User data persists in Firebase - Users cannot access another user's private data - Firebase Security Rules match the actual data structure - There is no remaining mock or temporary data - Loading and error states exist where needed - No private API keys or credentials are exposed in client-side code - Sensitive API calls run server-side - The production build completes successfully Fix only genuine launch blockers. Do not redesign the app or change working features unnecessarily. At the end, briefly report what you checked and anything I still need to configure manually.

If the App Uses Gemini

Google AI Studio should use the server-side GEMINI_API_KEY.

IMPORTANT

Do not move the key into frontend code, and do not create VITE_GEMINI_API_KEY.

When deploying outside AI Studio, the hosting environment should receive the server-side environment variable expected by the project.

Save the Finished Project to GitHub

Once the app works correctly, connect it to GitHub from Google AI Studio.

Create or link a repository Keep the repository private unless you intentionally want the code public Sync the finished project to GitHub

Deploy on Hostinger

In Hostinger, create a Node.js web app:

Websites Add Website Node.js Web App

Connect GitHub Select the project repository Review the detected framework and build settings Add any server-side environment variables the project actually requires Deploy

Do not create several guessed versions of the same environment variable. Use the exact names referenced by the project. For a current AI Studio app using Gemini, this will normally include:

GEMINI_API_KEY

GEMINI_API_KEY

Your Gemini API key — server-side only

Get this value from Google AI Studio

Open API Keys

https://aistudio.google.com/apikey

IMPORTANT

Keep secret values in Hostinger environment variables, never inside the repository.

Connect the production domain.

Connect a Custom Domain to Your Website or Web App After Deployment

Use this if you need help connecting the domain.

/video/connect-a-custom-domain-to-your-website-or-web-app

Hostinger can deploy directly from GitHub and automatically rebuild the app when new changes are pushed.

Test the App on the Production Domain

Do not consider the project finished just because the deployment says successful. Open the real production domain and test the important workflow again:

Create an account

Sign in and sign out

Create data

Refresh and confirm it persists

Check another account cannot see it

Upload a file

Test any AI-powered feature

Test the app on mobile

If the authentication method uses OAuth, also confirm that the production domain and redirect configuration are correct. This guide is complete only after the important workflow works on the real production domain.

Future Updates

The ongoing workflow is: Google AI Studio → GitHub → Hostinger.

Make the change in AI Studio Test it Sync the change to GitHub Hostinger redeploys the updated version

You do not need to rebuild the application or create a new deployment every time.