spinny:~/writing $ vim create-demo-claude-code-vibecoding.md
1~2**Vibecoding** é um novo paradigma de desenvolvimento de software onde o programador guia um agente de IA através de instruções em linguagem natural, deixando a inteligência artificial escrever o código real. O termo foi cunhado por Andrej Karpathy (cofundador da OpenAI e ex-Diretor de IA na Tesla) em um famoso tweet de fevereiro de 2025: _"Existe um novo tipo de codificação que eu chamo de vibecoding, onde você se entrega totalmente às vibes, abraça os exponenciais e esquece que o código sequer existe."_3~4Neste artigo, veremos como construir uma demo completa e funcional usando **Claude Code** como agente de IA, **Supabase** como backend (banco de dados, autenticação, API) e **Vercel** para deploy - tudo aproveitando exclusivamente os **planos gratuitos** desses serviços.5~6## 1. O Que é Vibecoding e Por Que é Revolucionário7~8Vibecoding representa uma mudança fundamental de paradigma no desenvolvimento de software. Em vez de escrever código linha por linha, o desenvolvedor:9~101. **Descreve** o que deseja em linguagem natural.112. **O agente de IA** gera o código completo.123. **O desenvolvedor** revisa, testa e itera.13~14### Por Que Funciona15~16- **Velocidade**: um projeto que levaria dias pode ser construído em horas.17- **Acessibilidade**: mesmo desenvolvedores não especializados podem construir produtos funcionais.18- **Iteração rápida**: você pode testar ideias e pivotar muito mais rápido.19- **Foco no produto**: você se concentra no _o quê_ em vez do _como_.20~21```mermaid22flowchart LR23 A[Idea] --> B[Natural language prompt]24 B --> C[Claude Code generates code]25 C --> D[Review and test]26 D --> E[Iteration]27 E --> B28 D --> F[Deploy to Vercel]29```30~31### Quando Usar Vibecoding32~33Vibecoding é perfeito para:34~35- **Demos e MVPs**: construir rapidamente um protótipo para validar uma ideia.36- **Hackathons**: criar um produto funcional em apenas algumas horas.37- **Projetos pessoais**: explorar novas tecnologias sem investir semanas.38- **Prova de Conceito**: demonstrar viabilidade técnica para stakeholders ou investidores.39~40> **Aviso:** Vibecoding é excelente para demos e protótipos. Para aplicações de nível de produção com altos requisitos de segurança e escalabilidade, uma revisão completa do código gerado ainda é essencial.41~42## 2. A Stack Tecnológica: Claude Code + Supabase + Vercel43~44### Claude Code45~46Claude Code é o agente de codificação IA da Anthropic. Ele funciona diretamente no seu terminal e pode:47~48- Ler e entender toda a base de código.49- Criar, modificar e excluir arquivos.50- Executar comandos no terminal.51- Interagir com APIs e serviços externos.52- Gerenciar versionamento com Git.53- Iterar autonomamente em erros e bugs.54~55```bash56# Install Claude Code57npm install -g @anthropic-ai/claude-code58~59# Start in a project directory60cd my-project61claude62```63~64### Supabase (Plano Gratuito)65~66Supabase é uma alternativa open-source ao Firebase que oferece:67~68- **Banco de dados PostgreSQL**: um banco de dados relacional completo.69- **Autenticação**: login com email, Google, GitHub, etc.70- **APIs REST e Realtime**: geradas automaticamente a partir do seu schema.71- **Storage**: para arquivos e imagens.72- **Edge Functions**: funções serverless.73~74O plano gratuito inclui:75~76| Recurso | Limite Gratuito |77|----------|-----------|78| Banco de dados | 500 MB |79| Storage | 1 GB |80| Largura de banda | 5 GB |81| Invocações de Edge Function | 500K/mês |82| Usuários autenticados | Ilimitados |83| Projetos | 2 projetos ativos |84~85### Vercel (Plano Gratuito)86~87Vercel é a plataforma de deploy perfeita para aplicações Next.js:88~89- **Deploy automático** a partir do GitHub.90- **Deploys de preview** para cada branch e PR.91- **CDN global** para performance otimizada.92- **Serverless Functions** incluídas.93- **Analytics básico** gratuito.94~95O plano gratuito inclui:96~97| Recurso | Limite Gratuito |98|----------|-----------|99| Largura de banda | 100 GB/mês |100| Execução de Serverless Function | 100 GB-horas/mês |101| Builds | 6.000 minutos/mês |102| Projetos | Ilimitados |103| Deploys | Ilimitados |104~105## 3. Configuração Inicial: Preparando o Ambiente106~107### Pré-requisitos108~109Antes de começar, certifique-se de ter:110~111- **Node.js 18+** instalado.112- **Git** configurado.113- Uma conta no **GitHub**.114- Uma conta no **Supabase** (gratuita em [supabase.com](https://supabase.com)).115- Uma conta no **Vercel** (gratuita em [vercel.com](https://vercel.com)).116- **Claude Code** instalado (`npm install -g @anthropic-ai/claude-code`).117~118### Passo 1: Criar o Projeto119~120Abra o terminal e inicie o Claude Code:121~122```bash123mkdir my-demo-app && cd my-demo-app124claude125```126~127Agora você pode começar a dar instruções ao Claude Code em linguagem natural:128~129```130You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,131and shadcn/ui. Also initialize a Git repository.132```133~134Claude Code executará automaticamente:135~136```bash137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir138npx shadcn@latest init139git init && git add . && git commit -m "Initial commit"140```141~142### Passo 2: Configurar o Supabase143~1441. Vá para [supabase.com](https://supabase.com) e crie um novo projeto.1452. Anote a **URL do Projeto** e a **chave anon** em Settings > API.1463. Volte ao terminal com Claude Code:147~148```149You: Add Supabase to the project. Create a .env.local file with the variables150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the151Supabase client with SSR support for Next.js App Router.152```153~154Claude Code criará a configuração completa:155~156```typescript157// src/lib/supabase/client.ts158import { createBrowserClient } from '@supabase/ssr';159~160export function createClient() {161 return createBrowserClient(162 process.env.NEXT_PUBLIC_SUPABASE_URL!,163 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!164 );165}166```167~168```typescript169// src/lib/supabase/server.ts170import { createServerClient } from '@supabase/ssr';171import { cookies } from 'next/headers';172~173export async function createClient() {174 const cookieStore = await cookies();175~176 return createServerClient(177 process.env.NEXT_PUBLIC_SUPABASE_URL!,178 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,179 {180 cookies: {181 getAll() {182 return cookieStore.getAll();183 },184 setAll(cookiesToSet) {185 cookiesToSet.forEach(({ name, value, options }) =>186 cookieStore.set(name, value, options)187 );188 },189 },190 }191 );192}193```194~195## 4. Construindo a Demo: Um App de Gerenciamento de Tarefas196~197Vamos construir uma demo concreta: um **app de gerenciamento de tarefas** com autenticação, CRUD completo e interface moderna.198~199### Definir o Schema do Banco de Dados200~201Dê instruções ao Claude Code para criar o schema:202~203```204You: Create a SQL migration for Supabase with the following tables:205~2061. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),207 created_at2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK209 to profiles), created_at2103. tasks: id (uuid), title (text), description (text), status (enum:211 todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,212 FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),213 created_at, updated_at214~215Enable Row Level Security on all tables and create appropriate policies.216```217~218Claude Code gerará uma migração completa:219~220```sql221-- Create enum types222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');224~225-- Profiles table226CREATE TABLE profiles (227 id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,228 username TEXT UNIQUE,229 avatar_url TEXT,230 created_at TIMESTAMPTZ DEFAULT NOW()231);232~233-- Projects table234CREATE TABLE projects (235 id UUID DEFAULT gen_random_uuid() PRIMARY KEY,236 name TEXT NOT NULL,237 description TEXT,238 owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,239 created_at TIMESTAMPTZ DEFAULT NOW()240);241~242-- Tasks table243CREATE TABLE tasks (244 id UUID DEFAULT gen_random_uuid() PRIMARY KEY,245 title TEXT NOT NULL,246 description TEXT,247 status task_status DEFAULT 'todo',248 priority task_priority DEFAULT 'medium',249 project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,250 assigned_to UUID REFERENCES profiles(id),251 due_date TIMESTAMPTZ,252 created_at TIMESTAMPTZ DEFAULT NOW(),253 updated_at TIMESTAMPTZ DEFAULT NOW()254);255~256-- Enable RLS257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;260~261-- Profiles policies262CREATE POLICY "Users can view own profile"263 ON profiles FOR SELECT USING (auth.uid() = id);264CREATE POLICY "Users can update own profile"265 ON profiles FOR UPDATE USING (auth.uid() = id);266~267-- Projects policies268CREATE POLICY "Users can view own projects"269 ON projects FOR SELECT USING (auth.uid() = owner_id);270CREATE POLICY "Users can create projects"271 ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);272CREATE POLICY "Users can update own projects"273 ON projects FOR UPDATE USING (auth.uid() = owner_id);274CREATE POLICY "Users can delete own projects"275 ON projects FOR DELETE USING (auth.uid() = owner_id);276~277-- Tasks policies278CREATE POLICY "Users can view tasks in their projects"279 ON tasks FOR SELECT USING (280 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())281 );282CREATE POLICY "Users can create tasks in their projects"283 ON tasks FOR INSERT WITH CHECK (284 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())285 );286CREATE POLICY "Users can update tasks in their projects"287 ON tasks FOR UPDATE USING (288 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())289 );290CREATE POLICY "Users can delete tasks in their projects"291 ON tasks FOR DELETE USING (292 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())293 );294```295~296Você pode executar esta migração diretamente pelo painel do Supabase (SQL Editor) ou via CLI.297~298### Gerar Tipos TypeScript299~300```301You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts302```303~304```bash305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts306```307~308### Construir a Interface do Usuário309~310Agora vem a parte mais poderosa do vibecoding. Dê ao Claude Code instruções de alto nível:311~312```313You: Create a dashboard page for the task management app with:314~3151. Sidebar with navigation between projects3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop3173. Modal to create/edit tasks3184. Header with user avatar and logout3195. Modern design with shadcn/ui and Tailwind320~321Use data from Supabase with React Server Components where possible322and Client Components only where interactivity is needed.323```324~325Claude Code construirá toda a interface, componente por componente.326~327### Adicionar Autenticação328~329```330You: Add a complete authentication system with:331~3321. Login page with email/password and GitHub login3332. Registration page3343. Middleware to protect authenticated routes3354. Automatic redirect for unauthenticated users3365. Automatic profile creation after registration337```338~339Claude Code configurará o middleware do Next.js e as páginas de autenticação:340~341```typescript342// src/middleware.ts343import { createServerClient } from '@supabase/ssr';344import { NextResponse, type NextRequest } from 'next/server';345~346export async function middleware(request: NextRequest) {347 let supabaseResponse = NextResponse.next({ request });348~349 const supabase = createServerClient(350 process.env.NEXT_PUBLIC_SUPABASE_URL!,351 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,352 {353 cookies: {354 getAll() {355 return request.cookies.getAll();356 },357 setAll(cookiesToSet) {358 cookiesToSet.forEach(({ name, value }) =>359 request.cookies.set(name, value)360 );361 supabaseResponse = NextResponse.next({ request });362 cookiesToSet.forEach(({ name, value, options }) =>363 supabaseResponse.cookies.set(name, value, options)364 );365 },366 },367 }368 );369~370 const { data: { user } } = await supabase.auth.getUser();371~372 if (!user && !request.nextUrl.pathname.startsWith('/auth')) {373 const url = request.nextUrl.clone();374 url.pathname = '/auth/login';375 return NextResponse.redirect(url);376 }377~378 return supabaseResponse;379}380~381export const config = {382 matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],383};384```385~386## 5. Padrões Avançados de Vibecoding387~388### Prompting Iterativo389~390O segredo do vibecoding eficaz é a **iteração**. Não tente descrever tudo em um único prompt. Proceda em etapas:391~392```393Step 1: "Create the base layout with header and sidebar"394Step 2: "Add the project list in the sidebar with a button to create new ones"395Step 3: "Create the Kanban view in the main area"396Step 4: "Add drag & drop between columns"397Step 5: "Implement the modal to create new tasks"398Step 6: "Add toast notifications for user feedback"399```400~401> **Dica:** Quanto mais específico e contextualizado o prompt, melhor o resultado. Claude Code tem acesso a toda a base de código, então pode integrar novas funcionalidades de forma coerente.402~403### Tratamento de Erros404~405Quando algo não funciona (e vai acontecer), você pode simplesmente dizer:406~407```408You: I'm getting this error in the console: "TypeError: Cannot read property409'map' of undefined" in the TaskList component. Fix it.410```411~412Claude Code analisará o código, identificará o problema e o corrigirá.413~414### Refatoração com IA415~416```417You: The Dashboard component has become too large. Split it into smaller,418reusable components while maintaining the same functionality.419```420~421### Testes422~423```424You: Add tests with Vitest for utility functions and Playwright tests for425the authentication and task creation flow.426```427~428## 6. Deploy no Vercel: Do Código para o Mundo429~430### Passo 1: Push para o GitHub431~432```433You: Create an appropriate .gitignore, commit everything, and push to a new434GitHub repository called "my-demo-app".435```436~437```bash438git add .439git commit -m "feat: complete task management demo"440gh repo create my-demo-app --public --push --source=.441```442~443### Passo 2: Conectar o Vercel444~4451. Vá para [vercel.com](https://vercel.com) e clique em "Add New Project."4462. Importe o repositório GitHub que você acabou de criar.4473. Adicione as variáveis de ambiente:448 - `NEXT_PUBLIC_SUPABASE_URL`449 - `NEXT_PUBLIC_SUPABASE_ANON_KEY`4504. Clique em "Deploy."451~452```mermaid453flowchart LR454 A[GitHub Push] --> B[Vercel Build]455 B --> C[Automatic Deploy]456 C --> D[Public URL]457 D --> E[Global CDN]458```459~460### Passo 3: Configurar um Domínio Personalizado (Opcional)461~462Vercel fornece uma URL gratuita como `my-demo-app.vercel.app`. Para um domínio personalizado:463~464```465You: Add the configuration for a custom domain in vercel.json466```467~468### Deploys de Preview469~470Toda vez que você abre um Pull Request no GitHub, o Vercel criará automaticamente um **deploy de preview** com uma URL única. Perfeito para mostrar mudanças antes do merge.471~472## 7. Otimizações para Sua Demo473~474### Performance475~476```477You: Optimize the app's performance:4781. Add loading states with Suspense and skeletons4792. Implement caching with Next.js unstable_cache4803. Optimize images with next/image4814. Add SEO metadata for each page482```483~484### Realtime com Supabase485~486Uma funcionalidade que sempre impressiona em demos é o **realtime**:487~488```489You: Add realtime synchronization for tasks using Supabase Realtime.490When a user updates a task, all other users should see the change491in real time without refreshing.492```493~494```typescript495'use client';496~497import { useEffect, useState } from 'react';498import { createClient } from '@/lib/supabase/client';499import type { Task } from '@/types/database';500~501export function useRealtimeTasks(projectId: string) {502 const [tasks, setTasks] = useState<Task[]>([]);503 const supabase = createClient();504~505 useEffect(() => {506 const channel = supabase507 .channel('tasks-changes')508 .on(509 'postgres_changes',510 {511 event: '*',512 schema: 'public',513 table: 'tasks',514 filter: `project_id=eq.${projectId}`,515 },516 (payload) => {517 if (payload.eventType === 'INSERT') {518 setTasks((prev) => [...prev, payload.new as Task]);519 } else if (payload.eventType === 'UPDATE') {520 setTasks((prev) =>521 prev.map((t) =>522 t.id === payload.new.id ? (payload.new as Task) : t523 )524 );525 } else if (payload.eventType === 'DELETE') {526 setTasks((prev) =>527 prev.filter((t) => t.id !== payload.old.id)528 );529 }530 }531 )532 .subscribe();533~534 return () => {535 supabase.removeChannel(channel);536 };537 }, [projectId, supabase]);538~539 return tasks;540}541```542~543### Modo Escuro544~545```546You: Add dark mode support with a toggle in the header.547Use Tailwind dark classes and save the preference in localStorage.548```549~550## 8. Melhores Práticas para Vibecoding Eficaz551~552### 1. Seja Específico nos Seus Prompts553~554```555❌ "Make a nice page"556✅ "Create a landing page with a hero section with a purple-blue gradient,557 a features section with 3 cards with icons, and an orange CTA button"558```559~560### 2. Forneça Contexto561~562```563❌ "Add authentication"564✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App565 Router with TypeScript. I want email/password login and OAuth with GitHub.566 Use the SSR pattern with @supabase/ssr"567```568~569### 3. Itere em Pequenos Passos570~571Não tente construir tudo em um único prompt. Proceda incrementalmente:572~5731. Layout base5742. Uma funcionalidade por vez5753. Estilo e polimento5764. Tratamento de erros5775. Testes578~579### 4. Revise o Código Gerado580~581Vibecoding não significa não ler o código. Sempre revise:582~583- **Segurança**: políticas RLS, validação de entrada, sanitização de dados.584- **Performance**: queries N+1, componentes client-side desnecessários.585- **Melhores práticas**: estrutura do projeto, convenções de nomenclatura.586~587### 5. Use Git Estrategicamente588~589```590You: Commit the changes with a descriptive message after each completed feature.591```592~593Isso permite reverter se algo der errado.594~595## 9. Custos: É Realmente Tudo Gratuito?596~597Aqui está uma análise de custos para cada serviço:598~599| Serviço | Plano Gratuito | Quando Você Paga |600|---------|-----------|-------------|601| **Claude Code** | Requer um plano Anthropic (a partir de $20/mês) ou chave API | Imediatamente, mas o valor é enorme |602| **Supabase** | Plano gratuito generoso (2 projetos, 500MB DB) | Além dos limites do plano gratuito |603| **Vercel** | Plano gratuito para projetos pessoais | Para equipes ou uso comercial |604| **GitHub** | Gratuito para repos públicos e privados | Funcionalidades enterprise |605~606> **Nota:** Claude Code requer uma assinatura ou créditos de API, mas o retorno sobre investimento em termos de velocidade de desenvolvimento é extraordinário. Para uma demo ou MVP, o custo total fica na faixa de $20.607~608### Alternativas de IA Gratuitas609~610Se você quiser manter os custos absolutamente zero, pode usar:611~612- **Cursor** (plano gratuito com limitações).613- **GitHub Copilot** (gratuito para estudantes e open source).614- **Codeium/Windsurf** (plano gratuito generoso).615~616## 10. Da Demo ao Produto: Próximos Passos617~618Uma vez que sua demo esteja no ar, aqui está como proceder:619~620```mermaid621flowchart TD622 A[Live Demo] --> B{User Feedback}623 B --> C[Product Iteration]624 C --> D[Product-Market Fit]625 D --> E[Scaling]626 E --> F[Supabase Pro Plan]627 E --> G[Vercel Pro Plan]628 E --> H[Custom Domain]629```630~6311. **Colete feedback**: compartilhe a demo com potenciais usuários e reúna opiniões.6322. **Itere rapidamente**: use vibecoding para implementar mudanças solicitadas.6333. **Monitore métricas**: Vercel Analytics e Supabase Dashboard fornecem dados essenciais.6344. **Escale quando necessário**: atualize para planos pagos apenas quando a demanda for validada.635~636~637## Conclusão638~639Vibecoding com Claude Code, Supabase e Vercel representa uma combinação poderosa para construir demos e MVPs em tempo recorde. O que antes levava semanas de desenvolvimento agora pode ser realizado em apenas algumas horas, com um nível de qualidade surpreendentemente alto.640~641A chave é abordar o vibecoding com a mentalidade certa: não se trata de "não saber programar", mas de **amplificar suas capacidades** com ferramentas de IA. Quanto mais você souber sobre as tecnologias subjacentes (React, SQL, autenticação, deploy), mais eficaz será ao guiar o agente de IA em direção ao resultado desejado.642~643O futuro do desenvolvimento de software está aqui, e o custo de entrada nunca foi tão baixo. Crie sua demo, valide com usuários reais e construa o próximo grande produto.644~645> **Checklist para sua primeira demo:**646>647> - [x] Claude Code instalado e configurado648> - [x] Projeto Supabase criado com schema do banco de dados649> - [x] Projeto Next.js inicializado com shadcn/ui650> - [x] Autenticação configurada651> - [x] CRUD completo implementado652> - [x] UI moderna e responsiva653> - [x] Deploy feito no Vercel654> - [x] URL compartilhável pronta para feedback655~
NORMAL · create-demo-claude-code-vibecoding.md [readonly]655 lines · :q to close