🚀 ZERO CODING EXPERIENCE REQUIRED • 7-Day Solo Founder Blueprint

Build & Ship a Production Full-Stack App in 7 Days
Without Hiring a Developer.

No technical jargon. No SQL queries. Bring any screen or plain idea, describe what you want in English or Hinglish, and let CortexOS guide your AI agent to build the database, backend, and frontend with zero regressions.

THE DUAL-ENGINE ARCHITECTURE

How CortexOS Operates Across Your Workspace

Antigravity IDE • Cortex Vision (Pinned)
BUILDER
Cortex Vision Pinned in Antigravity IDE
Cortex Vision (Pinned over IDE)

Prompt full-stack features in English or Hinglish. Compiles 1-shot Super Prompts into your AI chat.

Chrome • localhost:3000 • Cortex Lens (Ctrl+J)
DEBUGGER & POLISH
Cortex Lens Quantum Reticle and HUD
Cortex Lens (Ctrl + J / Alt + D)

Laser-targets UI bugs, captures DOM state, and polishes styling with the live CSS Staging Studio.

1. THE BUILDER & PROTECTOR
Cortex Vision + Lens

Vision: Pinned in your IDE to build full-stack features. Lens (Ctrl+J): In your live app to fix bugs & optimize design.

2. THE BUILDER
Antigravity / AI Agent

Reads CortexOS's surgical change order and creates files, schemas & wiring safely.

3. THE CLOUD
Supabase + Vercel

Zero-maintenance database storage and global edge deployment in 1 click.

How The CortexOS Academy Flips The Game

Traditional tutorials force you to learn database connection pooling, schema migrations, and REST APIs. Here is how simple it is with CortexOS.

❌ THE TRADITIONAL HARD WAY

"Write a PostgreSQL table schema, create foreign key constraints, setup Row Level Security, write backend route handlers, and debug CORS headers."

⚠️ Requires 3+ years full-stack experience
⚠️ AI rewrites unrelated files and breaks other buttons
⚠️ Weeks of debugging broken imports and database errors
✅ THE CORTEXOS 1-SHOT WAY

1. Build with Cortex Vision: Pin Vision in your IDE. Type what you want (English/Hinglish), compile, and paste into AI chat to build your entire full-stack app.
2. Harden with Cortex Lens: In your running app, press Ctrl + J on any broken element or misaligned design.
3. 1-tap Super Prompt fixes bugs, locks boundaries, and optimizes frontend in 1 shot!

✓ No database code needed from you
✓ Smart File Protection protects every other file from breaking
✓ 1-shot fix in seconds, not weeks
THE 30-SECOND APP BLUEPRINT

The Only 4 Folders You Need to Know

Every full-stack software application on earth is organized into these 4 simple compartments. You never need to memorize complex backend structures.

1. app/ or pages/ THE STAGE
What Your Users See

The visual screens, headlines, and buttons. When a user visits your URL, this is the code that paints their screen.

Example: page.tsx, dashboard.tsx
2. components/ LEGO BLOCKS
Reusable Building Blocks

Buttons, Navbars, Pricing Cards, and Modal windows. Created once and reused across multiple pages.

Example: Navbar.tsx, PricingCard.tsx
3. api/ THE VAULT
Secret Cloud Handshakes

Runs privately on the server. Handles payments (Stripe/Razorpay) and private AI keys so visitors cannot view them.

Example: api/create-order.js
4. .env.local THE KEYRING
Your Passwords & Keys

Your private database password and payment API secrets. Never uploaded to public GitHub.

Example: SUPABASE_KEY=...
ESSENTIAL SURVIVAL KNOWLEDGE

The 5 Traps AI Falls Into & How CortexOS Shields You

Prevents 99% of Beginner Headaches

When developers complain that "AI code assistants broke my app," it is almost always caused by one of these 5 traps. Here is how CortexOS acts as your invincible digital shield:

TRAP 1: Destructive File Rewrites Code Loss

The Problem: To modify 3 lines of CSS, the AI rewrites a 400-line file from scratch, silently deleting your authentication guards and route checks.

CortexOS Shield: Strictly forces minimal targeted line-range diffs. Rewriting entire files is banned.
TRAP 2: Silent Browser Crashes Unseen Bugs

The Problem: A button does nothing when tapped. Your editor shows zero red underlines, but the browser console is flooded with unhandled errors.

CortexOS Shield: Live Error Radar intercepts red browser crashes and injects the exact stack trace into your prompt.
TRAP 3: Phantom NPM Dependencies Missing Packages

The Problem: AI hallucinates library imports like import confetti from 'fake-library' that were never installed, breaking your build.

CortexOS Shield: Disk-Verified Invariant verifies installed packages in package.json before synthesizing code.
TRAP 4: Fake Mock Data Overwrites Database Breakage

The Problem: When debugging, the AI lazily replaces your live database query with a hardcoded static list like data = [{ id: 1 }].

CortexOS Shield: Strictly binds frontend components to live Supabase cloud feeds without falling back to fake data.
TRAP 5: The "Feature 1 vs Feature 2" Multi-File Regression

When building Feature 2 (e.g. Invoicing), AI modifies a shared helper function without knowing Feature 1 (Auth) relies on it. CortexOS Smart Boundary Lock detects every file connected to that function and locks its signature so nothing ever breaks.

Zero Regressions
Complete Curriculum

The 7-Day Production App Blueprint

Each day takes 30–60 minutes. By Sunday evening, your real product is live on the internet.

Your 7-Day Sprint Milestones

READY TO BUILD

Check off each milestone as you complete it. Your progress is saved automatically in this browser.

0% 0 / 8 DONE
PICK YOUR PROJECT TYPE

What Are You Building This Week?

Select your app idea below. Every single one follows the exact same 7-day CortexOS steps.

Example: Freelance Invoicing & Client Billing Portal Day 1 to Day 7 Flow

Users sign up, create and email professional PDF invoices to clients, track unpaid balances, and upgrade to Pro ($12/mo) for unlimited invoices.

🔑 Auth: Google & Email Sign-in
🗄️ Database: invoices, clients, profiles
💳 Billing: Razorpay / Stripe Pro Plan
INTERACTIVE PROMPT COMPOSER

Generate Your Custom 1-Shot Directive

Zero Technical Jargon Needed
READY TO PASTE INTO CORTEX VISION:

"When the user fills the signup form and clicks 'Create Account', create the 'users' table in Supabase if it doesn't exist (with id, full_name, email, role, created_at). Save their record, display a green success toast on screen, and redirect them to the dashboard. If the email already exists, show an error alert."

DAY 0

The 10-Minute Foundation: Node.js, IDE, GitHub, Supabase & Vercel Setup START HERE ⚡

Zero assumptions. How to install Node.js, launch your AI editor, and connect the 4 tools you need before building.

10-15 Mins ▼
0.1

Install Node.js (The Engine That Runs CortexOS & Next.js)

Node.js is what allows your laptop to run JavaScript, start local web servers, and boot npx cortexos-runtime. You only ever install this once in your life:

1. Go to official site: nodejs.org
2. Click the big green button: "Download Node.js (LTS)" (LTS = Long Term Support / Most Stable).
3. Run the downloaded installer, click "Next → Next → Finish". Done!
// Verify Node.js is installed in terminal: node -v
SHOULD PRINT v18, v20, OR v22
0.2

Install Your AI Development Studio (Antigravity IDE / Cursor)

This is your digital workshop where you view files, chat with your AI agent, and pin the Cortex Vision HUD:

• Download Google Antigravity IDE or Cursor (cursor.com).
• Install and open it. Press Ctrl + ` (Backtick key) at any time to reveal the built-in terminal.
0.3

Sign In to GitHub Inside Your Editor (Zero Terminal Pain)

GitHub is "Google Drive for code". It backs up your work so you never lose a file:

1. Create a free account at github.com if you don't have one.
2. In your editor window, look at the bottom-left corner and click the Accounts / Profile icon → "Sign in with GitHub".
3. Click "Authorize". Your editor is now permanently connected to GitHub. No SSH keys or passwords to type ever again.
0.4

Connect Supabase (Database) & Vercel (Cloud Hosting)

You don't need separate passwords or credit cards. Use your GitHub account to unlock both in 60 seconds:

🗄️ SUPABASE (YOUR DATABASE)

Go to supabase.com → Click "Continue with GitHub". This is where users, passwords, and tables will live.

☁️ VERCEL (YOUR HOSTING)

Go to vercel.com → Click "Continue with GitHub". This is where your live .online or .com link is created.

0.5

Test the 1-Line CortexOS Command (Zero Install Needed)

You never have to manually install or configure CortexOS. Node.js's built-in npx command boots it automatically:

npx cortexos-runtime

When you see ✅ Runtime Service: ONLINE (Port 9000), your computer is 100% armed and ready to build full-stack applications.

THE 5-COMMAND TERMINAL CHEAT SHEET (DEMISTIFIED) NO MEMORIZATION

The terminal is simply your direct line to your laptop's engine. You only need these 5 keyboard shortcuts and commands:

Ctrl + ` (Backtick)

Toggle the terminal open or closed inside your IDE at any time.

npm run dev

Starts your live web app server at http://localhost:3000.

Ctrl + C

Stops or kills a running local server if it gets stuck.

npx cortexos-runtime

Boots the CortexOS diagnostic sentry on local Port 9000 in under 1 second.

node -v

Health check: confirms Node.js LTS engine is installed and active on your machine.

✅ DAY 0 FOUNDATION COMPLETE:
✓Node.js installed on your machine (node -v verified)
✓AI IDE installed with built-in terminal
✓GitHub account signed in directly inside the editor
✓Supabase & Vercel unlocked with 1-click GitHub auth
✓CortexOS verified operational on Port 9000
🎉 You are 100% ready! All prerequisites are complete. Now click into Day 1 below to generate your running frontend screen in 30 minutes!
DAY 1

Zero to Running Prototype: Launch Your Screen & Pin Cortex Vision CLICK TO EXPAND

Learn the exact 5-step playbook to generate a frontend, boot the dev server, and pin Cortex Vision in your IDE.

35-45 Mins ▼
STARTING FROM ZERO? (HOW TO BOOTSTRAP IN 60 SECONDS) COLD START SOLVER

If you do not have an existing web project yet, pick either of these two paths to have a gorgeous frontend running on your screen in 60 seconds:

PATH A: The 10-Second Terminal 1-Liner (Recommended)
npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir=false --import-alias="@/*"

Then type: cd my-app followed by npm run dev.

PATH B: The Pure AI Agent Prompt (Zero Terminal Needed)

Open an empty folder in Antigravity or Cursor, open the AI chat, and paste:

"Create a modern full-stack web application using Next.js App Router and Tailwind CSS for my SaaS invoicing portal. Include a responsive navbar, hero section, pricing table, and invoice dashboard preview with modern dark glass aesthetics."

1.1

Create Your Project Folder & Open Your Editor

You don't need any complex setup or previous coding experience. Open your laptop:

1. Right-click on your Desktop or Projects folder → Create new folder: my-saas-app.
2. Open your AI IDE (Antigravity, Cursor, or VS Code).
3. Drag and drop the my-saas-app folder directly into your editor window.
4. Press Ctrl + ` (Backtick) to open the built-in terminal at the bottom.
1.2

Generate the Frontend Prototype with Your AI Agent

You don't need to write HTML, CSS, or React by hand. Open your AI agent chat in your IDE and paste one of these prompts:

PROMPT TEMPLATE (CHOOSE YOUR LANGUAGE)
// OPTION A: ENGLISH PROMPT
"Create a modern, clean full-stack Next.js 14 App Router project using Tailwind CSS. It should be a SaaS dashboard for freelance invoice management with a sidebar navigation, top header with user profile badge, total revenue KPI stats cards, and an invoice table with status pills."
// OPTION B: HINGLISH PROMPT
"Ek clean and modern Next.js 14 App Router project setup karo Tailwind CSS ke saath. Yeh ek freelance invoice management app ka dashboard hoga jisme sidebar ho, top header me user profile ho, total revenue ke cards ho aur invoice list ki table ho status pills ke saath."
1.3

Start the Local Server & View Your App Live

Once the AI finishes generating the files, click into your terminal and launch the dev server:

npm run dev

Open your browser (Chrome) and visit http://localhost:3000. You now have a working, visual web screen running locally!

1.4

Awaken CortexOS & Pin Cortex Vision in Your IDE

Now start the omniscient intelligence engine. Open a second terminal tab in your IDE and run:

npx cortexos-runtime
📌 HOW TO PIN CORTEX VISION IN YOUR IDE:

1. Visit http://localhost:9000/cortexos in your browser, or open the preview panel in your IDE.
2. Click the 📌 PIN (PiP) button at the top right of the Crimson HUD.
3. Cortex Vision floats directly beside your active code files, listening for feature directives.

Cortex Vision HUD pinned over Antigravity IDE
Pinned Cortex Vision HUD
THE 1-CLICK DISASTER RECOVERY PROTOCOL
ZERO PANIC GUARANTEE

What if an AI creates a blank white screen, causes a syntax error, or breaks an existing button? Never spend hours debugging. Follow these 2 golden rules:

RULE 1: THE INSTANT UNDO

If the AI just made an edit that you do not like, simply click in your editor and press Ctrl + Z to step backward immediately.

RULE 2: 1-CLICK RADAR HEAL

Look at Cortex Vision's LIVE ERROR RADAR. It automatically intercepted the red error and exact line! Click ⚡ COMPILE SUPER PROMPT and paste into AI. It will heal the bug in 1 shot without touching your working files!

✅ DAY 1 CHECKPOINT & TRI-FRONTIER VERIFICATION:
✓ Web app screen visible and rendering on localhost:3000
✓ CortexOS local daemon online on localhost:9000
✓ Cortex Vision pinned in IDE with [AUTO-REVERT ARMED]
🎉 Awesome job! You did zero manual coding, but you now have a live frontend prototype and an omniscient architecture engine connected. Tomorrow in Day 2, we connect Supabase memory without writing any SQL!
DAY 2

Connect Cloud Memory: Link Supabase & CortexOS Without Writing SQL CLICK TO EXPAND

Learn how to wire your database in 60 seconds. Zero table creation, zero SQL migration files, zero backend headaches.

25-30 Mins ▼
2.1

Create Your Free Cloud Database on Supabase (2 Mins)

You do not need to install PostgreSQL or configure complex servers on your computer. We use Supabase (the leading free developer cloud database):

1. Go to supabase.com and click "Start your project" (Sign in with your GitHub account).
2. Click + New Project → Name it my-saas-db, select your nearest region (e.g. Mumbai, Singapore, or US East), and generate a secure password.
3. Wait 45 seconds for the project to provision. Do NOT create any tables manually! CortexOS will architect them automatically for you.
2.2

Copy Your 2 Project Keys into Your Local .env File

Inside your Supabase project dashboard, navigate to Project Settings → API. You only need two values:

CREATE OR OPEN FILE: .env.local in project root
# 1. Project URL (Found under Project URL)
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co

# 2. Public Anon Key (Found under Project API Keys -> anon public)
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

🔒 Security Note: Your anon key is safe in public frontend code. CortexOS automatically keeps database writes guarded with Row-Level Security (RLS).

2.3

Verify CortexOS Auto-Detection (Zero Manual SQL)

Look at the terminal where npx cortexos-runtime is running. CortexOS automatically detects your newly added Supabase keys:

[CortexOS Security] 🛡️ Hardware signature validated: 8705ed7542c30abb...
[CortexOS] ✅ Supabase credentials detected in .env.local
[CortexOS] 🗄️ Database Auto-Detection: CONNECTED & ACTIVE
[CortexOS] 🌐 Universal Intelligence Core: Ready for plain prompts

If your terminal was already running from Day 1, simply restart it with Ctrl + C and run npx cortexos-runtime again so it loads the new keys.

2.4

Direct Cortex Vision to Wire the Supabase Client (No Coding)

Now open your pinned Cortex Vision HUD in your IDE. In the prompt box, describe what you want in English or Hinglish:

WHAT TO TYPE IN PINNED CORTEX VISION:
// OPTION A: ENGLISH
"Install @supabase/supabase-js, create a clean Supabase client helper in src/lib/supabase.ts, and test the connection by logging 'Database connected successfully' in the browser console."
// OPTION B: HINGLISH
"@supabase/supabase-js install karo, src/lib/supabase.ts me ek clean client helper create karo, aur connection verify karne ke liye console me 'Database connected successfully' log print karo."

Click ⚡ COMPILE SUPER PROMPT in Cortex Vision. Paste into your Antigravity AI chat. The AI installs the client library and creates the helper file in under 15 seconds.

THE 30-SECOND SUPABASE "ROW LEVEL SECURITY" PADLOCK FIX PREVENTS #1 SUPABASE ERROR

By default, Supabase places a virtual security padlock on all new database tables called Row Level Security (RLS). If you try to save a user record without unlocking it, Supabase rejects the insert with: new row violates row-level security policy.

The 1-Click Fix Directive (Paste into Cortex Vision):

"Add a Supabase RLS policy for the 'users' and 'invoices' tables that allows authenticated users to insert, read, and update only their own rows based on auth.uid(). Include a public insert policy for the signup flow."

This instantly configures bank-grade database security so users can only access their own data.

✅ DAY 2 CHECKPOINT & PERSISTENCE VERIFICATION:
✓ Supabase project provisioned and active
✓ Keys saved securely in .env.local
✓ CortexOS acknowledges live database credentials in terminal
✓ Browser console displays: "Database connected successfully"
🎉 Tremendous progress! Your app now has persistent cloud memory connected across the globe without you writing a single complex SQL query. Tomorrow in Day 3, we use Cortex Vision to turn static buttons into real data-saving actions!
DAY 3

Make Buttons Real: Wire User Sign-Up & Data Saving with Pinned Vision CLICK TO EXPAND

Turn static screen buttons into real data-saving actions. Type what you want in plain words → Cortex Vision compiles the database schema & API wiring in 1 shot.

35-45 Mins ▼
3.1

Locate the Form or Button in Your Project (3 Mins)

Look at the visual screen you launched in Day 1. You likely have a "Sign Up", "Create Invoice", or "Add Client" form. Right now, clicking that button does nothing because it has no database connected.

• In traditional development, you would need to write a backend endpoint in Next.js, create a database migration file, write SQL insert queries, and handle validation.
• With CortexOS: You do zero manual backend coding. Your pinned Cortex Vision HUD handles the entire architecture.
3.2

Prompt Your Feature Inside Pinned Cortex Vision (5 Mins)

Look at the Cortex Vision HUD pinned beside your editor. In the >_ BUG / DIRECTIVE DESCRIPTION textarea, describe exactly what should happen when someone fills the form:

PROMPT TEMPLATE (USER REGISTRATION & DATA SAVING)
// OPTION A: ENGLISH
"When the user fills the signup form and clicks 'Create Account', create the 'users' table in Supabase if it doesn't exist (with id, full_name, email, role, created_at). Save their record, display a green success toast on screen, and redirect them to the dashboard. If the email already exists, show an error alert."
// OPTION B: HINGLISH
"Jab user signup form fill karke 'Create Account' button pe click kare, toh Supabase me 'users' table create karo (fields: id, full_name, email, role, created_at). User ka data save karo, screen pe green success notification dikhao, aur dashboard pe redirect kar do. Agar email already registered ho toh clean error message alert show ho."
3.3

Compile the 1-Shot Super Prompt & Paste into AI Chat (2 Mins)

Click the vibrant button in Cortex Vision: ⚡ COMPILE SUPER PROMPT.

// What CortexOS does in background (< 50ms):

1. Auto-detects MODE: Feature Build Mode.
2. Scans your project to find the exact button and file you want to connect.
3. Enforces the 3-Part Architecture Plan ([THE ARCHITECT], [THE SENIOR DEV], [THE QA LEAD]).
4. Locks down all other files so your existing styles and header don't get broken or rewritten.

Now switch to your Antigravity (or Cursor) chat window and press Ctrl + V to paste. Press Enter.

3.4

Verify Live Data Inside Supabase Dashboard (5 Mins)

Watch the AI agent write the code. In 20 seconds, it finishes wiring the form. Now test your real application:

1. Open http://localhost:3000 in your browser.
2. Type your name, email, and password into the signup form.
3. Click "Create Account". You will see the green success notification appear!
4. Open your Supabase Dashboard → Table Editor → users. Your newly entered name and email are physically saved in the cloud database!
✅ DAY 3 CHECKPOINT & DATA-FLOW VERIFICATION:
✓ Signup form connected to Supabase backend API
✓ Database schema and table generated automatically with zero SQL
✓ Real user record verified inside Supabase cloud database
✓ Zero existing styling broken (Existing features and styles 100% safe from accidental changes)
🎉 Congratulations! You have just built a real database-backed full-stack feature by directing your AI through Cortex Vision. Tomorrow in Day 4, we connect dynamic feeds, filters, and instant search!
DAY 4

Dynamic Feeds & Live Search: Replace Mock Cards with Live Cloud Data CLICK TO EXPAND

Turn hardcoded UI placeholders into a high-performance live data table. Instant typing filter, zero page reloads, zero DOM freezing.

35-45 Mins ▼
4.1

Identify the Static "Fake" Data on Your Screen (3 Mins)

When you first generated your screen in Day 1, the AI put in 3–4 fake sample rows (e.g., *"Invoice #001 - John Doe - $500"*). Today, we replace those fake mocks with real data fetched live from your Supabase cloud database.

• The Common AI Trap: When normal AI agents try to connect databases, they often fetch data on every single keystroke, causing screen flickering and database connection limit crashes.
• The CortexOS Defense: CortexOS automatically injects Protocol 4 (Defensive Array Guarding: (items || []).map(...)) and React 18 Concurrent State so typing in the search bar is 60fps instant with zero lag.
4.2

Prompt Live Fetching & Real-Time Search in Cortex Vision (5 Mins)

Inside your pinned Cortex Vision HUD, write the directive in plain English or Hinglish:

PROMPT TEMPLATE (LIVE DATA FETCHING & INSTANT SEARCH)
// OPTION A: ENGLISH
"Replace the hardcoded invoice table with live data from Supabase. Fetch records on component mount with a sleek loading spinner. Add an instant client-side search input that filters by client name or invoice status without reloading the page. If no items match, display an elegant 'No matching invoices found' card."
// OPTION B: HINGLISH
"Hardcoded invoice table ko Supabase ke live data se replace karo. Data load hote waqt sleek loading spinner dikhao. Top pe ek search bar add karo jisme type karte hi instant client name aur status filter ho bina page reload huye. Agar koi record match na kare toh clean 'No matching invoices found' ka empty state card show ho."
4.3

Compile & Execute (Protected by Smart File Protection) (2 Mins)

Click ⚡ COMPILE SUPER PROMPT in Cortex Vision and paste into your AI agent:

// What CortexOS enforces behind the scenes:

• Zero Mock Fallbacks: Eliminates fake values like || 5 and wires directly to live array length.
• Defensive Memory Protection: Guards every array map so if Supabase returns 0 records, the screen never crashes with "cannot read properties of undefined".
• Smart Boundary Lock: Ensures the AI only updates the search bar and table, leaving your sidebar, header, and auth tokens completely untouched.

4.4

Insert a Test Item & Experience Live Real-Time Filtering (5 Mins)

Now test the speed of your new production feature:

1. Go to your browser at http://localhost:3000. Notice the clean loading spinner for a split second, followed by your live data.
2. Type a letter into the search bar. The table updates at 60 frames per second with zero delay.
3. Type gibberish like "xyz999". The table gracefully shows the custom empty state card instead of a broken error!
✅ DAY 4 CHECKPOINT & PERFORMANCE VERIFICATION:
✓ Hardcoded static mocks completely replaced with live cloud queries
✓ Real-time instant client-side search active without page reload
✓ Zero React runtime crashes or unhandled undefined exceptions
✓ Sidebar, header, and auth routes 100% intact
🎉 You now have a dynamic, data-driven web app! Tomorrow in Day 5, we plug in real payments (Razorpay/Stripe) so your app can start collecting money from users!
DAY 5

Accept Real Money: Plug In Razorpay or Stripe Without Security Flaws CLICK TO EXPAND

Turn your side-project into a cash-generating business. Secure serverless order creation, instant checkout modal, and automated user plan upgrade.

35-40 Mins ▼
5.1

Get Free Test API Keys from Razorpay or Stripe (3 Mins)

You do not need a business registration or GST certificate to build and test payments. Both Razorpay and Stripe provide free instant test accounts:

1. For India / Global Cards (Razorpay): Go to razorpay.com → Sign up → Toggle "Test Mode" at top → Go to Settings → API Keys → Generate Key.
2. For International SaaS (Stripe): Go to stripe.com → Toggle "Test Mode" → Copy your pk_test_... and sk_test_... keys.
5.2

Add Your Test Keys Securely to .env.local (2 Mins)

Open your local .env.local file and append your payment credentials:

# Append to .env.local (Razorpay Example)
RAZORPAY_KEY_ID=rzp_test_Tod4FmzHy1LLhq
RAZORPAY_KEY_SECRET=OtD61VizIatOajMqJgEASn3B

⚠️ Never expose your Secret Key in frontend code! CortexOS automatically generates a serverless backend endpoint (api/create-order.js) so your secret keys never touch the user's browser.

5.3

Prompt the Checkout & Plan Upgrade in Pinned Cortex Vision (5 Mins)

Inside your pinned Cortex Vision HUD, write your monetization directive in English or Hinglish:

PROMPT TEMPLATE (PAYMENT CHECKOUT & PLAN UNLOCK)
// OPTION A: ENGLISH
"Wire the 'Upgrade to Pro' button with Razorpay checkout. When clicked, call the backend to create an order of $12 (or Rs.999), open the Razorpay checkout modal, and upon successful payment, update the user's plan in Supabase from 'free' to 'PRO'. Show a celebratory confetti toast on completion."
// OPTION B: HINGLISH
"'Upgrade to Pro' button ko Razorpay checkout se wire karo. Click hone pe backend se order create ho, Razorpay payment popup open ho, aur successful payment ke baad Supabase me user ka status 'free' se badal ke 'PRO' ho jaye. Screen pe celebratory confirmation toast show ho."
5.4

Execute the 1-Shot Super Prompt & Run Test Transaction (5 Mins)

Click ⚡ COMPILE SUPER PROMPT in Cortex Vision. Paste into Antigravity AI. The agent installs the SDK, creates the backend order handler, and hooks up the checkout trigger.

1. Go to your browser at http://localhost:3000. Click the "Upgrade to Pro" button.
2. The payment modal appears! In Razorpay test mode, enter test UPI or card details (e.g. Card: 4111 1111 1111 1111, OTP: 123456).
3. Click Success. The modal closes, confetti pops up, and your account badge instantly changes from FREE to 👑 PRO!
SAFE PAYMENT SANDBOX: OFFICIAL TEST CARDS (ZERO REAL MONEY) TEST MODE ARMED

Never use your personal credit card during development. When using rzp_test_... or pk_test_..., Razorpay and Stripe provide official simulation cards that simulate successful purchases without charging real money:

Razorpay Test Card (India & Global)
Card Number: 4111 2222 3333 4444
Expiry / CVV: 12/28 • 123
Simulation OTP: 123456 (Instant Success)
Stripe Test Card (US, EU & Global)
Card Number: 4242 4242 4242 4242
Expiry / CVC: Any future date (e.g. 12/34) • 123
ZIP / Postal Code: 10001
The Live Switch Checklist: Only when you are ready to launch to real customers, log in to your payment dashboard, toggle from Test Mode to Live Mode, and update your Vercel Environment Variables with your Live keys!
✅ DAY 5 CHECKPOINT & MONETIZATION VERIFICATION:
✓ Payment gateway SDK integrated with zero security vulnerabilities
✓ Serverless order creation route active with secret key air-gapped
✓ Test transaction verified & user plan automatically updated to PRO
✓ Your application is now officially capable of generating real revenue!
🎉 Massive milestone reached! You now have a full-stack SaaS with user authentication, persistent cloud memory, and real-world billing! Tomorrow in Day 6, we launch Cortex Lens (`Ctrl + J`) inside your live browser to fix visual bugs and polish the design to Silicon Valley standards!
DAY 6

Production Hardening & Design Polish via Cortex Lens (Ctrl + J) CLICK TO EXPAND

Activate the Quantum GPS Reticle in your live app. Laser-target edge-case bugs, read React Fiber state, and dial in luxury glass/glow CSS directly on screen.

30-40 Mins ▼
6.1

Activate Cortex Lens Inside Your Running App (1 Min)

Open your browser tab at http://localhost:3000 where your full-stack app is running. Press either shortcut:

Ctrl + J Opens the Obsidian Crimson HUD overlay on screen
Alt + D Activates the Quantum GPS Crosshair Laser Reticle

Notice the bottom-right badge: ● CORTEX VISION Ctrl+J. You can also simply click that pill to open the HUD!

6.2

Laser-Target Any Broken Element or UI Bug (3 Mins)

Hover your mouse over any part of your UI that looks imperfect (e.g. a misaligned button, bad mobile padding, or a modal that won't close). Press Alt + D to lock target:

[TARGET LOCKED] #invoice-action-btn
• Component: <InvoiceActions />
• Source File: src/components/InvoiceActions.tsx [L42-88]
• Coordinates: x: 840, y: 310, w: 120px, h: 40px
• React Fiber State: props: { invoiceId: "inv_12", status: "PENDING" }
WHY AI FAILS AT UI FIXES (AND HOW ALT+D SOLVES IT) VISUAL TELEMETRY

If you type into your AI editor: "Fix the blue button on the dashboard," your AI cannot see your screen. It searches your entire codebase for the words "blue button", edits the wrong component file, and breaks another page entirely!

The Cortex Lens Fix: In your running browser, press Alt + D. A precision laser target locks onto the exact physical button on your screen. It feeds the exact file path, disk line numbers, and live CSS styles into the prompt. The AI fixes the exact right button in 1 attempt.
Cortex Lens (Ctrl + J) inspecting live DOM elements
Cortex Lens inspecting live DOM elements

Cortex Lens physically identifies the exact component name, file path, and disk line numbers on your machine — eliminating 100% of AI hallucination!

6.3

Interactive CSS Staging Studio (No Manual CSS Coding) (5 Mins)

Inside the Cortex Lens HUD, switch to the CSS Staging Studio tab. You get interactive visual presets to turn any basic component into a luxury Silicon Valley product:

CYBER CYAN GLASS

Applies backdrop-blur-xl with a luminous cyan rim light and specular shadow.

OBSIDIAN CRIMSON GLOW

Adds an ultra-subtle crimson aura and high-contrast dark border for critical actions.

Drag the sliders for Corner Radius and Padding. Your button changes in real time in your live browser!

6.4

Prompt the Production Bug Fix in English or Hinglish (3 Mins)

In the >_ BUG DESCRIPTION box in Cortex Lens, describe any remaining flaw or responsiveness issue:

PROMPT TEMPLATE (EDGE CASE & RESPONSIVE REPAIR)
// OPTION A: ENGLISH
"This action dropdown gets cut off on mobile screens (under 640px). Fix the positioning so it stays fully inside the viewport, add an ESC key dismiss listener, and apply the Cyber Cyan Glass preset from the CSS staging delta."
// OPTION B: HINGLISH
"Yeh action dropdown mobile screen pe cut ho raha hai. Iska position responsive fix karo taaki viewport ke andar rahe, ESC dabate hi close ho jaye, aur CSS staging studio ka Cyber Cyan Glass preset permanently apply ho."
6.5

Tap Compile & Paste: 1-Shot Flawless Repair (2 Mins)

Click ⚡ COMPILE SUPER PROMPT in Cortex Lens. Paste into Antigravity AI. In 15 seconds, your dropdown is mathematically fixed on mobile, dismisses on ESC, and glows with luxury glass styling.

THE 5-STEP INFINITE DEVELOPMENT LOOP (HOW FULL-STACK APPS ARE BUILT) FOUNDER RHYTHM

Building software with CortexOS is not about writing thousands of lines by hand. It is a seamless, circular rhythm you repeat for every new button, screen, or bug fix:

STEP 1 View Screen

Look at your app running in Chrome.

STEP 2 Alt + D (Lens)

Point laser reticle at element or bug.

STEP 3 Describe Intent

Type in English/Hinglish in Cortex Vision.

STEP 4 Paste in AI

1-tap Super Prompt builds the patch.

STEP 5 Refresh & Verify

See live result in your browser instantly.

✅ DAY 6 CHECKPOINT & PRODUCTION READINESS VERIFICATION:
✓ Cortex Lens (Ctrl + J / Alt + D) active and responsive in browser
✓ Exact DOM coordinates, React Fiber state, and line numbers mapped
✓ CSS Staging Studio deltas compiled and permanently written to code
✓ Zero edge-case bugs, zero console errors, 100% production ready!
🎉 Your software is now bulletproof! Tomorrow in Day 7, we execute the final step: 1-Click Global Deployment on Vercel so the whole world can use your app!
DAY 7

1-Click Global Ship: Deploy Live on Vercel with Custom Domain & SSL LAUNCH DAY 🚀

Push your code, connect your environment secrets, and launch your live production app to users worldwide in under 60 seconds.

25-30 Mins ▼
7.1

Create a Free GitHub Repository (3 Mins)

Your code is currently stored safely on your laptop. Now we publish it to GitHub so Vercel can automatically build and deploy it:

1. Go to github.com → Click the + icon at the top right → New repository.
2. Name it my-saas-app. Keep it Private (to protect your business logic). Click Create repository.
3. In your editor terminal, initialize and push your code with 3 simple commands:
git init
git add .
git commit -m "feat: initial production build via CortexOS"
git remote add origin https://github.com/your-username/my-saas-app.git
git push -u origin main
7.2

Connect Your Repository to Vercel (2 Mins)

Vercel is the gold standard for global web hosting. It provides free automatic SSL certificates, global edge servers, and zero-downtime rollbacks:

1. Go to vercel.com → Sign in with your GitHub account.
2. Click Add New... → Project.
3. Select your my-saas-app repository from the list and click Import.
7.3

Paste Your Environment Variables into Vercel Settings (3 Mins)

Before clicking deploy, expand the Environment Variables section in Vercel. Copy and paste the exact keys from your local .env.local file:

// Paste these 4 environment keys into Vercel:
NEXT_PUBLIC_SUPABASE_URL = [your-supabase-url]
NEXT_PUBLIC_SUPABASE_ANON_KEY = [your-supabase-anon-key]
RAZORPAY_KEY_ID = [your-razorpay-key]
RAZORPAY_KEY_SECRET = [your-razorpay-secret]

🔒 Air-Gapped Security: Vercel encrypts these secrets on military-grade hardware modules. No one on the internet can read your secret keys.

7.4

Click Deploy & Connect Your Custom Domain (5 Mins)

Click the big blue button: Deploy.

Watch Vercel compile your project. In under 45 seconds, fireworks appear on screen: Congratulations! Your project is live.

// Connect Your Own Domain (e.g. mycompany.com):

1. Go to Project Settings → Domains.
2. Type your domain name (e.g. mycompany.online).
3. Add the two DNS records (CNAME / A record) shown on screen at your domain registrar.
4. Vercel automatically generates a free auto-renewing SSL certificate in 60 seconds!

CUSTOM DOMAIN & FREE GLOBAL SSL IN 2 MINUTES LIVE COMMERCIAL BRAND

Your Vercel URL (my-app.vercel.app) is great for testing. When you are ready to point your real commercial brand (yourstartup.com), follow these 3 steps:

Step 1: In Vercel Project Dashboard

Go to Settings → Domains. Enter yourstartup.com and click Add.

Step 2: Add 2 DNS Records in Your Domain Registrar (Namecheap, GoDaddy, Porkbun)
Type: A Record
Name: @
Value: 76.76.21.21
Type: CNAME
Name: www
Value: cname.vercel-dns.com
Step 3: Instant Global SSL Padlock (HTTPS)

Vercel automatically provisions a free, zero-maintenance SSL certificate in under 60 seconds. Your app is now live, encrypted, and globally distributed across 300+ edge locations!

THE UNIVERSAL PRODUCTION SUITE

The Founder's Master Production Directive Toolkit

4 BATTLE-TESTED SHIELDS

Over 70% of AI-built "vibe-coded" applications fail after launch due to 4 fatal oversights: security breaches, unindexed database timeouts, broken mobile layouts, and blank social preview cards. Select any shield below to paste into Cortex Vision:

SHIELD 1: ZERO-TRUST BANK-GRADE SECURITY HARDENING

Enforces Supabase Row Level Security (RLS) locks, removes leaked client secrets, verifies prices on the server, stops IDOR attacks, and adds cryptographic webhook signatures.

### 🛡️ UNIVERSAL PRODUCTION SECURITY & ANTI-HACK MASTER DIRECTIVE
Apply a zero-trust, bank-grade production hardening pass across our entire codebase.
Audit and enforce the following 8 non-negotiable security protocols:

1. DATABASE & ROW LEVEL SECURITY (RLS) AUDIT:
   - Verify every table in our database has Row Level Security ENABLED (ALTER TABLE ... ENABLE ROW LEVEL SECURITY).
   - Enforce deny-by-default: write explicit policies so authenticated users can ONLY SELECT, INSERT, UPDATE, and DELETE rows where user_id === auth.uid().
   - Strictly forbid any client-side access to the Supabase service_role key.

2. SECRET ISOLATION & ZERO CLIENT LEAKS:
   - Audit all environment variables. Ensure NO private secrets (Stripe Secret Key, Razorpay Secret, Supabase Service Role, OpenAI API Key) are prefixed with NEXT_PUBLIC_ or VITE_.
   - Ensure all private API keys are strictly accessed inside server-only files (/api, Server Components, or serverless functions).

3. AUTHORIZATION & IDOR PREVENTION:
   - On every backend route and server action, never trust the ID passed in the request body or URL params.
   - Always verify the session on the server first, and verify that the requested resource belongs to the authenticated user (e.g., WHERE id = :id AND user_id = :session_user_id).
   - If user is not authorized, immediately return a typed 401 Unauthorized or 403 Forbidden.

4. SERVER-SIDE PAYMENT & WEBHOOK TAMPER PROOFING:
   - Never accept item prices, discounts, or subscription tiers from the frontend request body.
   - Look up the exact price on the server or in the Stripe/Razorpay product catalog.
   - On payment webhook handlers (/api/webhooks), verify the cryptographic signature (Stripe constructEvent or Razorpay HMAC-SHA256 signature) before granting credits or updating user roles to 'pro'.
   - Reject any webhook request with an invalid signature with a 400 Bad Request.

5. AI ENDPOINT RATE-LIMITING & CREDIT DRAIN SHIELD:
   - Guard all expensive routes (AI generation, PDF creation, email dispatch) behind authentication.
   - Implement an atomic credit check and deduction before calling external APIs.
   - Add rate-limiting (maximum requests per minute per IP/user) to prevent bot draining.

6. ATOMIC BALANCE & RACE CONDITION DEFENSE:
   - Replace read-then-write credit logic with atomic SQL transactions (UPDATE user_credits SET balance = balance - 1 WHERE user_id = :id AND balance >= 1).
   - Never allow credit balances to drop below zero during parallel requests.

7. INPUT SANITIZATION & SAFE DOM RENDERING:
   - Strip malicious HTML and script injections from all user inputs.
   - Never use dangerouslySetInnerHTML unless the payload is sanitized with DOMPurify.
   - Ensure all database queries use parameterized statements or ORM binding (zero raw string concatenation).

8. ERROR SANITIZATION & PRODUCTION LOGGING:
   - In production, catch all 500 errors and return clean, user-friendly messages ("An unexpected error occurred").
   - Never leak database stack traces, SQL syntax errors, or server file paths to the client browser.

Produce a clean, targeted diff that hardens our application without breaking existing working features.
✔ 1. Zero-Trust Security
✔ 2. Sub-10ms SQL Scale
✔ 3. 390px Zero Overflow
✔ 4. Viral OpenGraph Cards

THE PRODUCTION-READY SCORECARD

6/6 VERIFICATIONS

Before announcing your launch on Product Hunt, Twitter, or LinkedIn, confirm all 6 pillars are checked:

✔ Auth: Signup, login, and session persistence tested.
✔ Database: Records persist in Supabase cloud across refreshes.
✔ Security: .env.local passwords locked on server, never exposed in client JS.
✔ Billing: Successful test payment verified in Razorpay/Stripe sandbox.
✔ Mobile: Verified on 390px mobile viewport with zero horizontal overflow.
✔ Global SSL: Active HTTPS padlock on your production domain.
🎉 7-DAY MISSION ACCOMPLISHED: YOU ARE NOW A SOFTWARE FOUNDER!
✓ Live production web application deployed globally on high-speed CDN edges
✓ User authentication & persistent cloud database powered by Supabase
✓ Monetization enabled with live payment gateway checkout
✓ Obsidian-grade luxury design polished via Cortex Lens (Ctrl + J)
✓ $0 spent on hiring developers. Zero technical debt. Zero regressions.
Whenever you want to build your next feature, add a new screen, or optimize conversion, keep Cortex Vision pinned in your IDE and use Cortex Lens (`Ctrl + J`) in your live browser. You now hold the master keys to solo full-stack engineering!
Plain Language Superpower

English or Hinglish? CortexOS Understands Both.

You don't need to speak fluent Silicon Valley tech jargon. Describe your logic naturally — CortexOS transforms it into a mathematically grounded technical change order.

SCENARIO: User Authentication & Profile Creation
ENGLISH PROMPT

"When the user signs up with Google, create their profile record in the Supabase 'profiles' table with a default 'free' plan."

HINGLISH PROMPT

"Jab user Google se signup kare, unka profile record Supabase ke profiles table me save ho jaye aur default plan 'free' set rahe."

✓ CortexOS Result: Generates exact Supabase SQL schema + Next.js Auth Callback with zero syntax errors.
SCENARIO: Real-Time State Filter Without Page Refresh
ENGLISH PROMPT

"Filter the table in real time as the user types in the search bar. Do not reload the page, and show 'No results' if empty."

HINGLISH PROMPT

"Search bar me type karte hi table instant filter ho bina page reload huye. Agar koi record na mile toh 'No results found' ka card dikhao."

✓ CortexOS Result: Generates optimized client-side React 18 useMemo filter with zero lag and zero DOM freezes.