🧰 Prerequisites and how to use
This is a full-stack build. Each box below is a prompt to copy and run, with 🎯 goal e ✅ how to verify; replace what's between <chaves>. Prerequisites: accounts on Trigger.dev, Vercel, Supabase, and Stripe; GitHub connected; an AI key (e.g., Anthropic). The module’s golden rule is iterate in layers: functional app → design → auth → security → payment, testing at every step.
The leap in this module is the front + back. What the user sees (the frontend, on Vercel) is a pretty shell; the real work happens in the backend (the agent's logic, in Trigger.dev). They communicate — and everything that connects them (URL, keys) travels via env vars, never written in code.
Illustrative diagram — frontend (Vercel) and backend (Trigger.dev, shown in cyan as the "machine") connected by env vars; Supabase and Stripe come in as later layers.
🏛️ The architecture: backend + frontend
What it is
The app has two sides. The frontend is everything the user sees (the form and results screen), hosted on Vercel. O backend is the AI workflow that qualifies the lead (the business logic), hosted on Trigger.dev. They communicate so anyone with the URL can use the flow. The result is a screen with a score (e.g., 68/100, "warm lead"), a summary, the score breakdown, and suggested next steps.
What is it?Frontend — what runs in the browser, the interface. Backend — what runs on the server (logic, AI calls, database). Request/response cycle — you click, the frontend sends a request, the backend processes it and returns the response, and the screen updates.
🎯 Goal: plan the entire app and generate the CLAUDE.md (in Plan Mode).
Help me draft the CLAUDE.md. I want to build a workflow using the WAT framework. Create a folder for each section, except the agent. The workflow is an AI lead qualifier: I send lead data, and the AI qualifies the lead. Stack: I'll host the workflow on Trigger.dev. I'll create a frontend with your help where I fill out a form about the lead, click “Analyze,” and the workflow on Trigger.dev is called. When it finishes, it shows the results in the frontend. Finally, I publish the frontend to Vercel via GitHub. My backend is on Trigger.dev and my frontend is on Vercel, and they need to be able to communicate.
✅ How to verify: the AI creates the CLAUDE.md and the base structure (workflow/tool folders) following WAT, before coding. Review the plan before approving it.
Why learn
Understanding the front/back-end split is what unlocks building products, not just automations. The frontend makes the agent accessible; the backend keeps the logic and secrets out of the browser. Start with the CLAUDE.md gives the AI persistent context for the entire project.
Key concepts
Vercel · what you can see.
Trigger.dev · the logic.
Request → response.
Project context.
⚙️ Building the lead qualifier (from prompt to app)
What it is
With the plan ready, you build the backend and then the frontend. The backend receives the lead’s data (company, industry, size, criteria, urgency, pain points), scores it with AI, and returns the classification. You create the project in Trigger.dev, paste the Project ID in the trigger.config.ts and deploy to the dev e prod. The AI key goes in the dashboard as an env var.
🎯 Goal: build the workflow and put it into dev and prod.
[1] Crie o workflow do qualificador e me guie no deploy para o Trigger.dev.
[2] Estou vendo estes passos no Trigger.dev, me ajude a configurar —
já atualizei o trigger.config.ts com o meu project ref <project-id>.
[3] A tarefa foi adicionada ao ambiente de DEV no Trigger.dev, mas não vejo
no ambiente de PRODUÇÃO. Configure isso pra mim.
✅ How to verify: the task appears in dev AND prod (common error: it only exists in dev initially). Add the AI key (e.g., Anthropic) as an environment variable in both environments—preferably separate keys so you can track costs.
🎯 Goal: build the polished frontend (after /clear, in Plan Mode).
Now that my backend is ready (the qualifier workflow), I want to build the frontend. It should be a form where I enter a company’s information, and when I click “Analyze,” it calls my workflow in Trigger.dev. When the workflow finishes, I want to see the results on the site. First, I want to see the site LOCALLY to evaluate the design. Once the design is approved, I’ll publish it on Vercel. For the design, use Anthropic’s front-end design skill.
✅ How to verify: run locally first and evaluate the visuals. The design skill handles typography, colors, and motion — avoiding the “generic AI look” (the same old purple gradient).
Why learn
This topic repeats the pattern "describe the complete result," now in a full-stack context—and shows two real gotchas: promoting the task from dev to prod (it doesn't happen automatically) and call the design skill so the frontend doesn’t end up with the default look. Test the app locally before publishing.
Key concepts
In trigger.config.ts.
Promote to production.
Avoids the generic look.
Evaluate before publishing.
🔌 Connect frontend ↔ backend (env vars)
What it is
The connection between the two ends is a env var: the frontend on Vercel finds the backend (and the access key) through an environment variable, never a value written in the code. You publish on Vercel (by connecting GitHub) and add the secret key from Trigger.dev as an env var in Vercel — in production and development — without ever pasting the key into chat.
What is it?Environment variable (env var) — a value (URL, key) configured outside the code and injected at runtime. Switching environments (dev/prod) means changing the value, not the code.
🎯 Goal: deploy to Vercel and securely connect the frontend to the backend.
[prompt] O site ficou ótimo. Agora quero publicá-lo na Vercel. E garanta que ele consiga se comunicar com o meu workflow no Trigger.dev quando eu clicar em "Analisar". Não quero colar a chave secreta no chat — me diga onde colocá-la. [passo manual] Trigger.dev → API Keys → copie o secret key Vercel → projeto → Settings → Environment Variables → nova var: Name: TRIGGER_SECRET_KEY Value:(production + development) Depois: "Já configurei o secret key no painel da Vercel." → redeploy
✅ How to verify: click "Analyze" and see the score come back. If there’s a model error (e.g., 404—model name not found), the connection worked; just say: "I ran the workflow and got this error: <erro>. Fix it and redeploy."
Why learn
Env vars are what make the two sides communicate securely: the key stays in the dashboard, not in the code that goes to the browser. Notice the habit of not pasting secrets into the chat—you configure it yourself and just tell the AI where the key is. Connection errors are normal; the cycle is to return the error and redeploy.
Key concepts
URL + backend key.
Key never in chat.
Push → Vercel publishes.
Return it and redeploy.
👤 Authentication with Supabase + RLS
What it is
An open app is a problem: anyone with the URL can trigger the workflow and uses up your AI tokens (you pay for other people’s usage). The solution is authentication with Supabase (login/sign-up, each user with their own history) and, crucially, RLS (Row-Level Security): rules that live in the database itself and prevent one user from seeing another user's data — even if there is a bug in the frontend.
What is it?RLS (Row-Level Security) — database rules that limit which rows each user can see. It’s an extra layer: even if there’s a bug in the interface, the database refuses to return someone else’s data. Migration — an SQL script that changes the database structure (e.g., creating the table leads).
🎯 Goal: add login/sign-up and protect the routes (in Plan Mode).
Quero adicionar autenticação ao qualificador de leads. Os usuários devem poder se cadastrar, fazer login e ver o próprio histórico de qualificações. Quero usar o Supabase, e proteger as rotas principais do app para que só usuários logados acessem. Nunca usei Supabase — me guie passo a passo na configuração.
✅ How to verify: the AI generates the auth pages, navigation bar, and schema. In Supabase, create the project, set a strong bank password (different from the login password), choose the region and enable RLS.
🎯 Goal: connect Supabase and run the migration.
1. Supabase → copie o project URL e a publishable key. 2. Vercel → Settings → Environment Variables → adicione as duas → redeploy. 3. Supabase → Authentication → URL Configuration → adicione a URL do app (Vercel) e a redirect URL. 4. Migration: cole o SQL gerado pela IA no SQL editor do Supabase → Run (cria a tabela `leads`).
✅ How to verify: login/signup pages appear, along with the navbar with account + sign out, and a history page with leads persisted per user (they used to disappear when you closed the browser).
Why learn
Login alone isn't enough: without RLS, a frontend bug could show one user's data to another. RLS moves the defense to the data level, where it’s reliable. It’s the difference between “seems protected” and “is protected.”
Key concepts
They use up your tokens.
Login + database.
Database-level protection.
SQL in the editor.
🛡️ Security audit
What it is
With auth in place, ask the AI to act as a security specialist and scan the code: do protected routes require login? Is any API key exposed in the frontend? Do secrets come from env vars? Is RLS actually enabled? It reports what doesn’t pass, and you ask it to fix those issues.
What is it?Security audit — a systematic review for vulnerabilities. Rate limiting — limit how many times an endpoint can be called within a time interval to prevent cost abuse.
🎯 Goal: audit the code for security issues (after /clear).
Quero que você audite o código em busca de problemas de segurança. Verifique que: - todas as rotas protegidas exigem autenticação; - nenhuma chave de API está exposta no código do frontend; - variáveis de ambiente são usadas para TODOS os segredos; - o Row-Level Security (RLS) está habilitado corretamente. Aja como uma especialista em segurança e reporte tudo que não passar.
✅ How to verify: the report classifies the findings (e.g., 1 medium, 3 low, 1 informational, none critical/high). A typical actionable finding: add rate limiting on the qualification endpoint to prevent cost abuse. Ask AI to fix the issues.
Why learn
An app in production has an attack surface. The audit catches what’s easy to forget: a route without login, a key leaked to the client, RLS turned off. Treating AI as a security expert is a powerful pattern — it knows common vulnerabilities and points out what you wouldn’t see.
Key concepts
Require login.
Key stays on the server.
Confirm in the database.
Prevents cost abuse.
💳 Payments with Stripe (freemium)
What it is
Even a logged-in user can call your AI key without limits (200 leads = 200 paid calls). The solution is to charge with Stripe in a model freemium: a free tier with a limit (e.g., 2 qualifications per day) and a paid plan (e.g., $29/month, unlimited) through Stripe Checkout. This turns the app into a SaaS.
What is it?Freemium — free up to a limit, paid to unlock the rest. Checkout — the payment screen hosted by Stripe. Price ID — the product’s price identifier. Webhook secret — the key that validates that the payment notification really came from Stripe.
🎯 Goal: add payments with a freemium model (in Plan Mode).
Quero adicionar pagamentos com Stripe ao qualificador de leads. O nível grátis recebe <2> qualificações por dia. Passado isso, precisa assinar. O plano pago custa <$29> por mês e dá qualificações ilimitadas. Quero usar o Stripe no fluxo de pagamento. Me guie passo a passo para configurar a conta, criar o produto e conectar o Stripe à Vercel e ao Supabase.
✅ How to verify: the AI generates the pricing page (Free vs. Pro), database tables, and the Stripe client/server. Start in the test/sandbox mode from Stripe.
🎯 Goal: configure the product, webhook, and the 4 Stripe keys.
1. Stripe (modo teste) → Product catalog → New product: nome "", recorrente, mensal, <$29> → salvar. 2. Abra o produto → Pricing → copie o PRICE ID (guarde num bloco de notas). 3. Developers → API keys → copie publishable key e secret key. 4. Developers → Webhooks → Add endpoint: URL = /api/stripe-webhook (use a URL EXATA que a IA der) Eventos: checkout.session.completed, customer.subscription.updated, customer.subscription.deleted → copie o WEBHOOK SECRET. 5. Supabase → SQL editor → rode a migration gerada (cria a tabela `subscriptions`). 6. Vercel → Settings → Environment Variables → adicione as 4 chaves (secret, publishable, price ID, webhook secret) → salvar → redeploy.
✅ How to verify: on the pricing page, subscribe to Pro → Stripe Checkout → test card (future expiration date, e.g., 10/27, any CVC) → subscription confirmed → a new row appears in the table subscriptions from Supabase.
Why learn
Payment is what turns an app into a product: real revenue and protection against cost abuse. The Stripe webhook is what “unlocks” the paid plan when payment is confirmed—and the webhook secret ensures that the notification really came from Stripe, not an impostor.
Key concepts
Free up to the limit.
Stripe screen.
Completed, updated, deleted.
In the Vercel dashboard.
🖥️ Frontend for an n8n workflow (form → webhook)
What it is
The final build brings together the course’s two worlds: giving an app-like feel to a n8n workflow. The example is a quote generator (inputs: project description, estimated hours, client type → returns a quote). You create a frontend that sends the data to the webhook of the flow and shows the response. The trick in n8n: replace the form node with the Webhook trigger and the output node through Respond to Webhook.
What is it?Respond to Webhook — an n8n node that returns the response to whoever called the webhook, for the frontend to display. Placeholder — a temporary value (e.g., the webhook URL) that you replace with the real one later.
🎯 Goal: plan the frontend that communicates with the n8n webhook.
Me ajude a criar um CLAUDE.md para este projeto. O objetivo é construir um frontend web para um workflow do n8n. O workflow é um gerador de orçamentos: o usuário informa descrição do projeto, horas estimadas e tipo de cliente, e recebe de volta um orçamento profissional. O frontend envia os dados para um webhook do n8n e deve exibir a resposta. Use a skill de front-end design da Anthropic. Me faça as perguntas de esclarecimento que precisar.
✅ How to verify: the AI asks about the stack and webhook URL (use a placeholder for now) and the response format (e.g., JSON). If the visual design looks basic, ask: "The UI is too simple. Make sure you're using the front-end design skill" and paste the skill again.
🎯 Goal: convert n8n to a webhook and connect the real URL.
No n8n: 1. Remova o PRIMEIRO nó (form) → adicione um Webhook trigger. 2. Remova o ÚLTIMO nó (saída) → adicione um "Respond to Webhook". 3. Reconecte ambos à lógica existente. 4. PUBLIQUE o workflow e copie a URL de produção do webhook. [prompt] Quando o usuário clicar em "Gerar orçamento", chame este webhook. Substitua o placeholder atual por ele:Na Vercel: Settings → Environment Variables → nova var N8N_WEBHOOK_URL = → salvar → redeploy.
✅ How to verify: fill out the form (e.g., landing page / healthcare / 40 h / enterprise) → "Generate quote" → n8n runs → the quote appears in the app. Use the URL for production and the workflow needs to be published.
Why learn
This build connects visual automation (n8n) to a real app interface—the native n8n form works, but the experience is limited and access is restricted. Replacing the form with a webhook + "Respond to Webhook" is the standard way to give any workflow a friendly, shareable interface.
Key concepts
Switch the trigger.
Returns the response.
Temporary URL.
Production URL.
🪜 Incremental iteration (design → auth → payment)
What it is
This entire module is an app that grew in layers, starting from a one-sentence prompt: functional app → design → authentication → payment → deploy. You don’t need to plan everything in advance; deliver v1 and add features as needed—a good engineering practice.
Illustrative diagram — one layer at a time, testing each one. The app started as a sentence and became a SaaS with auth and payment.
🎨 Tip: avoid the “generic AI look”
AI outputs look alike because the default model is “safe design.” Push against that: ask it to use front-end design skill; look for inspiration (design galleries, component libraries); upload reference screenshots to the project; and describe the layout precisely (fixed header, logo on the left, glowing CTA). Give specific feedback as you iterate: “I like X, change Y.”
Why learn
Iterating in layers keeps each step testable and reversible: if a payment breaks something, you know it was the last layer. Trying to build everything at once creates a tangle that’s impossible to debug. Start small, back up before every change, publish early, and grow—it’s the same principle that opens trail 1.
You have a full-stack app to build, with design, login, and payments. Which approach follows this module’s best practice?
📌 Module Summary
You completed Track 5! 🎉
You built three end-to-end projects. The natural next step is Track 6—Production, Deploy & Security—to harden all of this with reliability and monetization.