In this hands-on guide, we'll go from an idea to a published website using modern AI tooling. We'll explore the concept of vibe coding, use Firebase Studio to build the app, deploy it, optionally add a custom domain via CloudMySite, and even set up monitoring and cleanup steps.
This is the full journey โ from prompting to production. You can also check the contents of this blog live in below video:
๐ง What is Vibe Coding?โ
Vibe coding is a new approach to software development where you:
- Focus on expressing ideas
- Let an AI (like Gemini) generate the code
- Iterate with feedback prompts rather than typing every line
The term was popularized by Andrej Karpathy and has gained traction with tools like Replit Ghostwriter, Amazon Q Developer, and Gemini in Firebase Studio.
๐ฏ Why It's Neededโ
- Speed up prototyping
- Lower barrier for non-developers
- Encourage experimentation
- Build from *what you want1. rather than how to build it
๐ ๏ธ How to Vibe Codeโ
-
๐ฃ๏ธ Prompt the AI
โMake a to-do list with reminders.โ
-
๐ง LLM generates code
You get HTML, CSS, JavaScript, maybe even Firebase Firestore logic.
-
๐ Preview & Tweak
Ask: โMake the buttons blueโ_ or _โAdd swipe-to-deleteโ
-
๐ Deploy & Iterate
Test live. Iterate fast.
๐ฅ Why It's Trendingโ
- โก Speed: You can build entire features in minutes
- ๐ Flow-first mindset: Create first, refactor later
- ๐ Lower barrier: Designers and beginners can ship real apps
๐ Real-World Adoptionโ
- Y Combinator startups now build MVPs using vibe coding
- Amazon Q Developer is being used in production at scale
- Companies like Visa, Reddit, DoorDash are listing vibe coding as a required skill
๐ Productivity Gainsโ
- Up to 5ร faster prototyping
- You skip boilerplate โ AI handles it
- You focus on creativity, UX, and testing
โ ๏ธ What to Watch Out Forโ
- ๐ Security: You must review AI-generated code for vulnerabilities
- ๐งฉ Scalability: It's great for small apps, but larger systems still need architectural guidance
- ๐งพ Understanding: You may not know how every line of code works unless you dig in
๐ฅ Enter Firebase Studio: Your AI Coding Assistantโ
Firebase Studio at https://studio.firebase.google.com allows you to build entire apps using Gemini by simply typing prompts.
Before we do that, letโs walk through the setup.
โ๏ธ Setting Up Firebase and Google Cloudโ
Step 1: Create a Google Accountโ
- Visit https://accounts.google.com/signup
- Complete the signup process
Step 2: Create a Google Cloud Projectโ
- Go to https://console.cloud.google.com
- Click Select project > New Project
- Give it a name (e.g., vibe-demo-app)
- Enable Billing if required (many Firebase features are free in Spark tier)
Step 3: Link to Firebaseโ
- Visit https://firebase.google.com
- Click Go to Console
- Choose your Google Cloud project
- Click Register App > choose Web icon
Done! Your Firebase app is now set up and connected.
๐ง Firebase Console vs Firebase Studioโ
Feature | Firebase Console (console.firebase.google.com) | Firebase Studio (studio.firebase.google.com) |
---|
Purpose | Manage backends and services | Build full-stack apps via AI prompts |
UI | Traditional dashboard | In-browser code editor with Gemini |
Deployment | CLI / GitHub Actions | One-click inside Studio |
AI Support | โ | โ
Gemini built-in |
Users | DevOps & engineers | Builders, designers, vibe coders |
Live Preview | โ | โ
|
Custom Domains | Via Hosting settings | Can link in Hosting tab or deploy externally |
Use both together: build with Studio โ monitor/scale in Console.
โก Build a Web App with Firebase Studioโ
Step 1: Open Studioโ
- Go to https://studio.firebase.google.com
- Click Start from scratch
- Select your Firebase project
Step 2: Prompt Geminiโ
Enter this:
Build a responsive personal portfolio website with sections for About, Projects, Contact. Use Firebase Hosting. Make it clean and modern.
Studio will:
- Generate HTML/CSS/JS
- Scaffold hosting settings
- Show preview panel
Step 3: Customize and Testโ
- Edit content inline (like project names or images)
- Use additional prompts like:
Add a dark mode toggle
Make the project cards responsive
Step 4: Deployโ
- Click Deploy (top-right)
- Studio will deploy to a default .web.app domain
Example: https://vibe-portfolio-demo.web.app
๐ Connect a Custom Domain via CloudMySiteโ
CloudMySite.com offers free hosting โ you only pay for the domain.
- Go to https://cloudmysite.com
- Search for and purchase a domain
- From the dashboard, click Add Site
- Point the domain to your Firebase Hosting target (e.g. CNAME to ghs.googlehosted.com)
- Update Firebase Hosting settings in Console to add custom domain
โ
Within minutes, your Firebase-hosted app runs on your domain.
๐ Monitor & Logsโ
Firebase Console Monitoring:โ
- Go to console.firebase.google.com
- Open Performance or Analytics tabs
- Set up monitoring for slow loads, user sessions, errors
View Logs:โ
- In Firebase Console, go to Functions > Logs (if using backend)
- Or view Hosting logs from Google Cloud Logging:
- Visit console.cloud.google.com/logs
- Filter by resource.type="firebase_hosting_site"
๐ฎ Explore Genkit (Optional)โ
Genkit.dev is Google's framework for building AI-powered apps using local + cloud models.
Use it to:
- Add AI search to your site
- Use Gemini + embedding models
- Run local inference or Vertex AI endpoints
Genkit can be integrated with Firebase Functions and deployed serverlessly.
๐ Starting with a Firebase Studio Templateโ
Firebase Studio makes it incredibly easy to jumpstart your app with production-ready templates that cover a wide range of use cases. Whether youโre building a mobile app, an AI assistant, or a web dashboard, thereโs a curated template to help you get moving quickly.
๐ง Whatโs Available?โ
Firebase Studio includes a rich selection of pre-configured templates across different categories:
- Backends (Node.js, Flask, Go, etc.)
- AI Apps powered by Gemini and other models
- Web Projects (Next.js, React, Vue)
- Mobile templates (Flutter, Android, iOS)
- Databases with Firestore, SQL, or external APIs
- Sample apps and complete solution blueprints
You can start with a community-contributed template, an official Google-backed one, or even a blank template to roll your own from scratch.
๐๏ธ Templates are available directly in Firebase Studio or on GitHub.
๐ Get started with a Firebase Studio template
๐ฏ What to Do Nextโ
- Explore the generated code and config files
- Add authentication, Firestore, or hosting as needed
- Use prompts to modify UI, logic, or connect APIs
- Preview and deploy with one click
Templates in Firebase Studio provide a perfect blend of speed and flexibility โ letting you vibe code your way into a functional, scalable app.
๐๏ธ Delete App and Projectโ
Delete Firebase App:โ
- Go to https://console.firebase.google.com
- Project settings > General > Click Delete this app
Delete GCP Project:โ
- Go to https://console.cloud.google.com/projectdelete
- Select your project
- Confirm deletion
๐ Warning: this action is irreversible โ data will be permanently lost.
โ
Recapโ
- Vibe coding lets you prototype apps through natural prompts
- Firebase Studio + Gemini brings this to life
- Deploy your app with a click
- Use CloudMySite to add a real domain
- Monitor usage, extend with Genkit, or clean up when done
From idea to live site โ no IDE required.
๐ Call to Actionโ
Whether you're experimenting with AI coding for the first time or deploying your tenth Firebase app, the right tools can save hours and spark creativity. If you're looking for a fast, free way to bring your site online with zero DevOps hassle, check out CloudMySite Genie.
โจ Use the AI-powered Genie at cloudmysite.com/genie to instantly generate and deploy your website โ no coding required.
Want to connect your Firebase project to a custom domain or migrate your vibe-coded site to production? Genie takes care of that, too โ just describe your goals, and it handles the rest.
๐จโ๐ป Ready to go from prompt to published site in minutes?
๐ Start with Genie
Ready to build your next idea? Try Firebase Studio + CloudMySite now and turn your prompt into a product.