Summary of "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:
- Vibe-coding a SaaS from requirements in plain English
- Design-to-code pipeline:
- Codex-generated image/UI → Claude Design HTML → Codex back-end
- Automated browser testing by the agent
- Practical integrations:
- Google OAuth login
- Google Calendar API
- 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
Category
Technology
Share this summary
Is the summary off?
If you think the summary is inaccurate, you can reprocess it with the latest model.
Preparing reprocess...