How to Build & Launch REAL Web Apps (Google AI + Firebase)

Summary

This tutorial walks through building, testing, and deploying a functional web app using Google AI Studio, Firebase, GitHub, and Hostinger. The demo app, Client Vault, is a file portal where clients can create accounts and privately upload, view, download, and delete files.

1. Plan the app with a structured prompt

The presenter recommends organizing an AI Studio prompt into four parts:

1. What it is: The app’s name and purpose.
2. What it needs: Pages, features, and interactions.
3. How it looks: Design, colors, layout, and visual style.
4. Back-end features: Authentication, a database, file storage, and security rules.

AI Studio can generate the initial app and, when requested, set up a Firebase project and connect its back end.

2. Configure Firebase

The tutorial verifies the back end in the Firebase console before proceeding with front-end changes:

• Authentication: Google sign-in may be enabled automatically. Email-and-password sign-in must be enabled separately if the app needs it.
• Cloud Storage: The presenter creates a storage bucket for uploaded files. The tutorial says Firebase Storage requires linking a billing account and describes Blaze as pay-as-you-go, with usage potentially remaining within the free tier. It recommends setting a low budget alert as a safeguard.
• Database: Firestore stores app data, including user and file information.

After changing Firebase settings, the presenter recommends telling AI Studio what changed so it can update or verify the app’s code and connections.

3. Test and troubleshoot the app

The tutorial frames the back end around four core pillars: authentication, a database, file storage, and connecting those services to the user interface. The first three are configured in Firebase; the UI connections need to be tested feature by feature.

The recommended troubleshooting workflow is to test each core feature, note failures, and ask AI Studio to address one issue per prompt. In the demo, file uploads initially fail or do not display correctly. AI Studio is prompted to troubleshoot the Firebase Storage and Firestore connection. The presenter then tests uploading, downloading, deleting, signing out, and signing back in to confirm that files and account data persist.

4. Add an admin dashboard and security rules

To give the app owner an overview of users and their data, the tutorial recommends:

• Copying the owner’s Firebase user ID from Authentication.
• Prompting AI Studio to identify that account as the administrator and create a separate admin view.
• Checking the Firestore security rules to confirm the admin ID is included.
• Manually updating Storage rules as needed, since the presenter says these may not update automatically with the database rules.

The resulting demo dashboard shows user and file counts, user details, and uploaded files. The tutorial emphasizes that regular users should still see only their own data.

5. Save and deploy the app

The project is saved to a private GitHub repository from AI Studio. The tutorial then deploys it through Hostinger’s Node.js web-app hosting, selecting the Vite framework preset and connecting the GitHub repository.

For projects using AI features, the presenter adds Gemini API-key environment variables in Hostinger. After deployment, the app is available on a custom domain.

The tutorial also demonstrates the update workflow: make a change in AI Studio, commit it to GitHub, and let Hostinger automatically redeploy.

Guides and practical advice

• A linked Google AI Studio/Firebase guide provides prompts and copy-and-paste security rules, including the admin dashboard prompt.
• Use the four-part prompt structure to improve the initial generated app.
• Verify the back end before making extensive front-end changes.
• Test the deployed app and Firebase connections rather than assuming the preview alone proves everything works.
• Hostinger is presented as the tutorial’s recommended hosting option; the presenter promotes a discount link.

Main speaker and source

• Metics Media presenter: Narrates and demonstrates the complete tutorial, including the AI Studio build, Firebase setup, testing, admin configuration, GitHub workflow, and Hostinger deployment.