← Back to Home ← Blog

How I Built a Production SaaS in 2 Hours Using Google AI Studio Build Mode

By Amir Lotfy • January 27, 2025 • 8 min read • AI, SaaS, Web Development

The Problem That Started It All

I was sitting at my desk at 2 AM on a Tuesday, staring at a blank slate. The hackathon challenge was clear: build something meaningful in limited time using Google's latest AI tools.

Career guidance. That's the problem I wanted to solve.

I've talked to hundreds of professionals in Egypt and the GCC region, and they all tell me the same thing: "I have the skills, but I don't know what path to take. There are 10,000 courses online, but which ones actually matter?"

The problem was obvious. The solution? Build a personalized AI learning roadmap generator. But here's the constraint: I had to do it fast. And I had a wild idea: What if I didn't write any code at all?

The Traditional Path (Rejected)

Normally, building a SaaS would take weeks:

Total time: 8 weeks. Total code written: ~5,000 lines.

But I had a better idea. What if I could describe the entire app in natural language and let AI generate production code?

Discovering Google AI Studio Build Mode

I'd heard about Google AI Studio Build Mode—a "vibe coding" platform where you describe what you want, and Gemini generates a full-stack app. I was skeptical. "No way this generates production-grade code," I thought.

I was wrong.

The Experiment: Describe, Don't Code

11:00 PM - Tuesday Night

I opened AI Studio Build Mode and started typing:

Create a React 18 app with:
  • Landing page (hero, features, pricing)
  • Firebase authentication (Google OAuth + email)
  • 6-step profile wizard (career goals, experience level, time commitment, learning style, resource preference, review)
  • Firestore database integration
  • Cloud Functions backend
  • Gemini 2.5 Pro API integration for roadmap generation
  • Dashboard with real-time course recommendations
  • Quiz system with AI grading
  • Study timer (Pomodoro)
  • Fully responsive design
  • Deploy to Cloud Run

I hit generate.

11:07 PM

Gemini returned: Complete React 18 + TypeScript + Tailwind CSS frontend. All components. All hooks. All validation. Type-safe.

// Generated automatically by Gemini
import React, { useState } from 'react';
import { useAuth } from './contexts/AuthContext';
import ProfileWizard from './components/ProfileWizard';

export default function Dashboard() {
  const { user } = useAuth();
  const [roadmap, setRoadmap] = useState(null);
  
  // 50+ lines of generated code...
}

I wasn't expecting this quality. It looked like code I would write. Actually, it looked better.

11:15 PM

Firebase Cloud Functions generated. Not boilerplate. Real logic:

// Generated by Gemini - Full API endpoint
exports.generateRoadmap = functions.https.onRequest(async (req, res) => {
  // Authentication verification
  const user = await admin.auth().verifyIdToken(req.body.token);
  
  // Rate limiting per user
  const roadmapsThisMonth = await db.collection('roadmaps')
    .where('userId', '==', user.uid)
    .where('createdAt', '>', oneMonthAgo)
    .get();
  
  if (roadmapsThisMonth.size >= monthlyLimit) {
    return res.status(429).json({ error: 'Monthly limit reached' });
  }
  
  // Call Gemini 2.5 Pro with thinking mode
  const roadmap = await genai.generateContent({
    contents: [{
      parts: [{ text: `Generate 12-week roadmap for: ${JSON.stringify(req.body)}` }]
    }],
    generationConfig: { temperature: 0.7 },
    systemInstruction: 'You are an AI learning advisor...'
  });
  
  // Save to Firestore
  await db.collection('roadmaps').add({
    userId: user.uid,
    roadmap: roadmap,
    createdAt: new Date()
  });
  
  res.json(roadmap);
});

This wasn't template code. This was production code.

11:25 PM

Firestore security rules, auto-generated:

// Firestore Rules - Auto-generated
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if request.auth.uid == userId;
    }
    
    match /roadmaps/{roadmapId} {
      allow read, write: if request.auth.uid == resource.data.userId;
    }
  }
}

Row-level security. Out of the box.

11:35 PM

One-click deployment to Cloud Run. Not kidding. One click. The app was live.

I tested the login. It worked.

I filled out the wizard. It worked.

I hit "Generate Roadmap." It called Gemini 2.5 Pro with thinking mode enabled. Gemini started reasoning through optimal learning sequences (not just retrieving similar courses). 12 seconds later, I had a personalized 12-week roadmap with real courses from Coursera, Udemy, and YouTube.

I clicked a course link. Real course. Not hallucinated.

11:47 PM

I was done.

Total time: 47 minutes.

But Wait—What About Thinking Mode?

Here's where it gets interesting.

Most AI tools do retrieval-augmented generation (RAG). They search a database and say, "People interested in X usually like Y." It's pattern matching.

Gemini 2.5 Pro Thinking Mode is different.

Thinking mode actually reasons through the problem. Here's what happens:

User Input: "I want to become a Web Developer. I'm a beginner. I have 15 hours/week. I learn best by doing hands-on projects."

Traditional AI: Finds 10 web dev courses and returns them.

Gemini Thinking Mode:

It takes 10-15 seconds. Worth every second.

And here's the genius part: Web search grounding. Every course Gemini recommends gets verified. Real course, real link, current information. No hallucinations.

I clicked 5 random courses in my generated roadmap. All real. All current. All had live links.

The Architecture (In Case You Care)

The system is surprisingly elegant:

User → Landing Page (React)
↓
Login (Firebase Auth)
↓
Profile Wizard (6 questions, auto-saved)
↓
Click "Generate Roadmap"
↓
Cloud Function receives request
↓
Calls Gemini 2.5 Pro API with thinking mode
↓
Gemini reasons + searches web
↓
Returns structured roadmap JSON
↓
Saved to Firestore
↓
Firestore real-time listeners trigger
↓
React dashboard updates instantly
↓
User sees: 4 milestones, 12 courses, 8 quizzes
↓
User clicks course → Opens real course on Coursera/Udemy/YouTube

Deployment: Cloud Run auto-scales. Handles 1 user or 1 million. Cost: $0 for first 2M API calls/month.

The Numbers

What This Means

I used to think AI code generation was a gimmick. "Sure, it can write hello world. But real apps? Production apps? No way."

I was wrong.

Google AI Studio Build Mode generated:

No copy-paste boilerplate. No security shortcuts. Just... production code.

The Real Magic: Gemini 2.5 Pro Thinking Mode

But the real breakthrough isn't the generated code. It's how Gemini 2.5 Pro with thinking mode transforms the user experience.

Career guidance used to be:

Chatbot: "Have you tried React?"
Unhelpful.

Now it's:

AI with thinking mode: "Here's your personalized 12-week roadmap with real courses, structured milestones, progress tracking, and AI-graded quizzes."
Useful.

The difference? Reasoning vs pattern-matching. And I built it in under an hour using AI Studio.

What's Next

I'm now expanding Shyftcut to:

All built the same way: Describe in natural language, let Gemini generate, deploy.

The Lesson

You don't need to be a full-stack developer to build production SaaS anymore.

If you can:

...you can build production apps in hours instead of weeks.

This isn't the future of software development. It's happening now. Right now.

And it's incredible.

Try Shyftcut

If you want to see this in action:

Click "Generate Roadmap," answer 5 questions, and watch Gemini 2.5 Pro thinking mode create your personalized learning path.

Then imagine: This entire app—frontend, backend, database—was generated by AI in 47 minutes. No manual coding required.

Questions?

Drop a comment below or reach out on LinkedIn or Twitter.

I'm answering questions about:

Share this article: Twitter | LinkedIn