How I Vibe Coded a $900K App in 13 Minutes (Claude Design + Codex)

Summary (Tech concepts, features, tutorial flow)

• Goal: Build a Calendly-like calendar booking SaaS (“Meetly”) end-to-end using AI—not just a prototype, but a working app with key booking and host-management functionality.
• Core value proposition (business framing):
  • Apps can provide recurring revenue (monthly payments) and are sellable once they generate steady income.
  • Market examples referenced: Calendly, Cal.com, plus smaller competitors/earnings as motivation.

---

Tools + approach

• Claude Design (front-end/UI)

  • Used to generate high-fidelity UI from prompts, then produce HTML/CSS/assets.

• ChatGPT Codex (back-end + integration wiring)

  • Used to implement functionality, connect services, and run browser-based testing.
  • Recommended model cited: GPT 5.5 (described as smarter than other options at the time).

• Image generation integration

  • The creator claims Codex has built-in image generation, avoiding switching tools for image assets.

---

Build workflow (step-by-step tutorial)

1) Feature planning via prompting

• Prompt Codex to propose a numbered list of app features for a Calendly/Cal.com-style system.
• Selected features include:
  • User accounts + profile management
  • Public booking pages (custom links)
  • Calendar integrations
  • Event types
  • Time zone–aware scheduling
  • Google login and Google calendar connection

2) UI design generation (with multiple options)

• Prompt Codex to generate 5 UI options including:
  • Host dashboard and guest booking page
  • Wants image outputs to choose from
• The chosen UI is described as professional and close to Calendly, with iterations like dark theme considerations.

3) Turn UI images into interactive front-end with Claude Design

• Download the UI screenshot/images and upload them into Claude Design on cloud.ai.
• Configure a new design project (e.g., “Meetly”) using high fidelity.
• Prompt Claude to build two pages with navigation/structure based on the provided design reference.
• Output:
  • Clickable booking page + host dashboard UI
  • Hover/animation behavior exists but is initially not fully functional.

4) Export designs and implement back-end in Codex

• Export Claude project as ZIP, place it into the folder Codex monitors.
• Ask Codex to:
  • Review design completeness
  • Build back-end functionality and ensure every function works
  • Use browser use to test functions automatically

5) Agent-driven functional testing + iteration

• Codex runs a local test:
  • Navigates pages, creates/toggles event types, cancels booking, updates availability, verifies booking submission.
• Additional interaction:
  • Use annotation/cursor control to request UI tweaks (e.g., “Make this green”), then apply changes.

---

Implementations added beyond the initial booking UI

6) Authentication: Google login (OAuth flow)

• Codex requests setup steps in Google Cloud:
  • Create a Google Cloud project
  • Configure OAuth consent screen
  • Create an OAuth Client ID for a web application
  • Provide authorized JavaScript origins and redirect URLs from Codex
• Result:
  • The app shows “Sign in with Google” and successful login.

7) Google Calendar integration (API + scopes)

• Enable Google Calendar API in Google Cloud.
• Update OAuth consent screen data access scopes (the creator copies scope values from Codex and adds them).
• In the app’s Integrations section:
  • “Google Calendar not connected” → user connects via OAuth
• Verified behavior:
  • Changes in availability (e.g., toggling off Friday availability) propagate to the booking/availability UI after refresh.

---

Production readiness plan (deployment and data)

• Database: Recommended Supabase

  • Needed so bookings/users and updates persist beyond local demo mode.
  • Codex can guide setup via prompting.

• File storage + code hosting:

  • Store files to GitHub

• Hosting:

  • Connect to Vercel for hosting (described as “free”)
  • Option to use a custom domain

• The creator emphasizes: you can ask AI to guide these steps in plain English without needing to understand underlying code details.

---

Review / tutorial emphasis

This video is essentially a hands-on tutorial showing:

1. Vibe-coding a SaaS from requirements in plain English
2. Design-to-code pipeline:
   • Codex-generated image/UI → Claude Design HTML → Codex back-end
3. Automated browser testing by the agent
4. Practical integrations:
   • Google OAuth login
   • Google Calendar API
5. Deployment checklist: Supabase → GitHub → Vercel → domain

---

Main speakers / sources

• Primary speaker: The video creator (single narrator/host; persona implied by “I” statements throughout).
• Technical sources/tools used:
  • Claude Design
  • ChatGPT Codex (and its browser-use testing)
  • Google Cloud APIs (OAuth, Google Calendar API)
  • Superbase (as referenced)
  • GitHub
  • Vercel