Built 100% on Google AI Studio Build Mode

This entire project—frontend, backend, database integration, and deployment—was built using Google AI Studio's Build Mode. Zero manual coding, zero configuration, pure AI-generated, production-ready code.

The Flow:

  1. Describe app idea in AI Studio Build Mode → Gemini generates full React + Firebase stack
  2. Integrate Gemini 2.5 Pro + Firestore directly in Build Mode
  3. Test locally in AI Studio's live preview
  4. Click "Deploy to Cloud Run" → Live URL in seconds

Result: A fully-functional SaaS app deployed and live in <2 hours.


The Problem We Solve

Career transitions are terrifying. Millions of professionals globally—especially in emerging markets like Egypt and GCC—have the skills but not the roadmap. They face:

  • Analysis Paralysis: 10,000+ courses available, but which ones matter?
  • Information Overload: YouTube, Coursera, LinkedIn Learning, Udemy—all noise
  • Structural Gap: No one tells them: this week learn X, week 2 build Y, week 4 get hired
  • Market Gap: Career platforms show courses but not structured paths

Result: Talented people stay stuck. Companies miss great talent. Opportunity wasted.

Market Size: 100M+ professionals in Egypt & GCC alone need guidance.


What We Built: Shyftcut

An AI-native learning roadmap generator using Gemini 2.5 Pro with thinking mode and web search grounding.

Entirely generated by AI Studio Build Mode.

Core Solution

1. User answers 5 questions (1-minute wizard):

  • Career goal (15 options: AI, Web Dev, UX/UI, Data Science, etc.)
  • Experience level (Beginner → Expert)
  • Weekly commitment (5-30 hours)
  • Learning style (Video, hands-on, interactive coding, etc.)
  • Budget (Free only, Paid, Mixed)

2. Gemini AI thinks deeply (10-15 seconds):

  • Analyzes user context using thinking mode (not just pattern matching)
  • Searches web for real, verified courses (Coursera, Udemy, YouTube, edX, Skillshare)
  • Generates personalized 12-week roadmap

3. User gets structured path:

  • 4 milestones (3 weeks each)
  • Per-milestone: Tasks, real course links, success criteria, interactive quizzes
  • Study timer (Pomodoro), progress tracking, gamification (badges, streaks)

4. Real courses from real platforms:

  • NOT hallucinated (web search grounds every recommendation)
  • Real links (user clicks → immediate action)
  • Mixed free/paid based on preference
  • Platform variety (YouTube, Coursera, Udemy, LinkedIn Learning, etc.)

How It Was Built (AI Studio Build Mode)

The Vibe-Code Approach

Instead of traditional development:

Old Way: Hire developers, spend weeks writing code, debug, deploy ✅ Shyftcut Way:

  • Prompt: "React 18 app with Firebase auth, 6-step wizard, Gemini integration, Firestore"
  • Gemini generates: Full React component structure, Firebase Cloud Functions backend, Firestore integration
  • Deploy: Click "Deploy to Cloud Run" → Live URL

What AI Studio Generated:

✅ Frontend (React 18 + TypeScript + Tailwind CSS + Framer Motion)

  • Landing page with hero, features, pricing
  • Firebase Auth UI (Google OAuth + Email)
  • 6-step profile wizard (all form validation built-in)
  • Dashboard with real-time Firestore listeners
  • Quiz system with grading logic
  • Study timer component

✅ Backend (Firebase Cloud Functions)

  • generateRoadmap Cloud Function (Gemini integration)
  • gradeAnswer Cloud Function (AI grading)
  • Rate limiting logic
  • Firestore integration

✅ Database (Firebase Firestore)

  • Auto-generated schema
  • Security rules (row-level access control)
  • Real-time listeners

✅ Deployment (Google Cloud Run)

  • Containerization
  • Auto-scaling setup
  • Environment variables configured
  • Live URL

All generated by AI Studio's Gemini 2.5 Pro in Build Mode. Zero manual coding required.


Why This Architecture Matters

Innovation: Gemini 2.5 Pro Thinking Mode

Most AI career tools use retrieval-augmented generation (RAG)—basically "retrieve similar courses." We use reasoning-grade AI:

  • Gemini thinks through: "This person is mid-career, limited time, wants hands-on. These courses build on each other in THIS specific order."
  • It doesn't just find courses—it reasons about learning sequences
  • Web search grounds every recommendation (no hallucination)
  • Result: Roadmaps that actually work, not generic lists

What We Learned

AI Studio Insights

  • Build Mode is production-ready: Generated code is clean, scalable, deployable immediately
  • Gemini integration is seamless: API integration happens automatically in generated code
  • Thinking mode matters: Reasoning-grade AI produces better roadmaps than pattern-matching
  • Web search grounding is critical: Without it, AI hallucinates non-existent courses

Market Insights

  • Career guidance is sticky: Users complete roadmaps (high engagement)
  • Freemium model works: Free tier gets users, Pro converts
  • Instructor marketplace is gold: Instructors will pay to reach career-shifters

Engineering Insights

  • No-code doesn't mean limited: AI Studio generated production-grade architecture
  • Real-time Firestore matters: Optimistic UI + real-time listeners = instant feel
  • Gemini 2.5 Pro is worth it: Thinking mode generates better outputs

Challenges Overcome

  1. Course Hallucination: Used web search grounding to verify every recommendation
  2. Latency: Thinking mode takes 10-15s; solved with streaming UI + "Generating..." messages
  3. Rate Limiting: Implemented per-user, per-month quotas to prevent abuse
  4. Mobile Network: Designed for 4G; tested on Egypt/GCC networks
  5. No-Code Limitations: AI Studio Build Mode generated exactly what we needed—no workarounds required
  6. Firebase Functions Deployment: Deploying Everything on Google AI Studio Was Somehow The Hardest Step Ever, Also Supporting Egypt Payment Methods On Google For Upgrading Firebase Project Was A Challenge Which I Came Over By Making Some Broad Friends' Calls

Live & Testable

  • App is deployed: Live Cloud Run URL (judges can test immediately)
  • App is functional: Real authentication, real database, real Gemini API calls
  • App is scalable: Auto-scales to 1,000+ concurrent users
  • App is production-ready: Ready for real users today

This is not a demo. This is a real, working app.

Built With

  • firebase-authentication
  • firebase-cloud-functions
  • firebase-firestore
  • firebase-storage
  • framer-motion
  • gemini-thinking-mode
  • google-cloud-run
  • google-gemini-2.5-pro-api
  • react-18
  • search
  • tailwind-css
  • typescript
  • web
Share this project:

Updates