Como Construir uma Demo com Claude Code: Vibecoding com Supabase e Vercel

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."

Neste 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.

1. O Que é Vibecoding e Por Que é Revolucionário

Vibecoding representa uma mudança fundamental de paradigma no desenvolvimento de software. Em vez de escrever código linha por linha, o desenvolvedor:

1. Descreve o que deseja em linguagem natural.
2. O agente de IA gera o código completo.
3. O desenvolvedor revisa, testa e itera.

Por Que Funciona

• Velocidade: um projeto que levaria dias pode ser construído em horas.
• Acessibilidade: mesmo desenvolvedores não especializados podem construir produtos funcionais.
• Iteração rápida: você pode testar ideias e pivotar muito mais rápido.
• Foco no produto: você se concentra no o quê em vez do como.

Quando Usar Vibecoding

Vibecoding é perfeito para:

• Demos e MVPs: construir rapidamente um protótipo para validar uma ideia.
• Hackathons: criar um produto funcional em apenas algumas horas.
• Projetos pessoais: explorar novas tecnologias sem investir semanas.
• Prova de Conceito: demonstrar viabilidade técnica para stakeholders ou investidores.

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.

2. A Stack Tecnológica: Claude Code + Supabase + Vercel

Claude Code

Claude Code é o agente de codificação IA da Anthropic. Ele funciona diretamente no seu terminal e pode:

• Ler e entender toda a base de código.
• Criar, modificar e excluir arquivos.
• Executar comandos no terminal.
• Interagir com APIs e serviços externos.
• Gerenciar versionamento com Git.
• Iterar autonomamente em erros e bugs.

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start in a project directory
cd my-project
claude

Supabase (Plano Gratuito)

Supabase é uma alternativa open-source ao Firebase que oferece:

• Banco de dados PostgreSQL: um banco de dados relacional completo.
• Autenticação: login com email, Google, GitHub, etc.
• APIs REST e Realtime: geradas automaticamente a partir do seu schema.
• Storage: para arquivos e imagens.
• Edge Functions: funções serverless.

O plano gratuito inclui:

| Recurso | Limite Gratuito | |----------|-----------| | Banco de dados | 500 MB | | Storage | 1 GB | | Largura de banda | 5 GB | | Invocações de Edge Function | 500K/mês | | Usuários autenticados | Ilimitados | | Projetos | 2 projetos ativos |

Vercel (Plano Gratuito)

Vercel é a plataforma de deploy perfeita para aplicações Next.js:

• Deploy automático a partir do GitHub.
• Deploys de preview para cada branch e PR.
• CDN global para performance otimizada.
• Serverless Functions incluídas.
• Analytics básico gratuito.

O plano gratuito inclui:

| Recurso | Limite Gratuito | |----------|-----------| | Largura de banda | 100 GB/mês | | Execução de Serverless Function | 100 GB-horas/mês | | Builds | 6.000 minutos/mês | | Projetos | Ilimitados | | Deploys | Ilimitados |

3. Configuração Inicial: Preparando o Ambiente

Pré-requisitos

Antes de começar, certifique-se de ter:

• Node.js 18+ instalado.
• Git configurado.
• Uma conta no GitHub.
• Uma conta no Supabase (gratuita em supabase.com).
• Uma conta no Vercel (gratuita em vercel.com).
• Claude Code instalado (npm install -g @anthropic-ai/claude-code).

Passo 1: Criar o Projeto

Abra o terminal e inicie o Claude Code:

mkdir my-demo-app && cd my-demo-app
claude

Agora você pode começar a dar instruções ao Claude Code em linguagem natural:

You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
and shadcn/ui. Also initialize a Git repository.

Claude Code executará automaticamente:

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npx shadcn@latest init
git init && git add . && git commit -m "Initial commit"

Passo 2: Configurar o Supabase

1. Vá para supabase.com e crie um novo projeto.
2. Anote a URL do Projeto e a chave anon em Settings > API.
3. Volte ao terminal com Claude Code:

You: Add Supabase to the project. Create a .env.local file with the variables
NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
Supabase client with SSR support for Next.js App Router.

Claude Code criará a configuração completa:

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

4. Construindo a Demo: Um App de Gerenciamento de Tarefas

Vamos construir uma demo concreta: um app de gerenciamento de tarefas com autenticação, CRUD completo e interface moderna.

Definir o Schema do Banco de Dados

Dê instruções ao Claude Code para criar o schema:

You: Create a SQL migration for Supabase with the following tables:

1. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
   created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
   to profiles), created_at
3. tasks: id (uuid), title (text), description (text), status (enum:
   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
   created_at, updated_at

Enable Row Level Security on all tables and create appropriate policies.

Claude Code gerará uma migração completa:

-- Create enum types
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Profiles table
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Projects table
CREATE TABLE projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tasks table
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  status task_status DEFAULT 'todo',
  priority task_priority DEFAULT 'medium',
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
  assigned_to UUID REFERENCES profiles(id),
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Profiles policies
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Projects policies
CREATE POLICY "Users can view own projects"
  ON projects FOR SELECT USING (auth.uid() = owner_id);
CREATE POLICY "Users can create projects"
  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
CREATE POLICY "Users can update own projects"
  ON projects FOR UPDATE USING (auth.uid() = owner_id);
CREATE POLICY "Users can delete own projects"
  ON projects FOR DELETE USING (auth.uid() = owner_id);

-- Tasks policies
CREATE POLICY "Users can view tasks in their projects"
  ON tasks FOR SELECT USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can create tasks in their projects"
  ON tasks FOR INSERT WITH CHECK (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can update tasks in their projects"
  ON tasks FOR UPDATE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can delete tasks in their projects"
  ON tasks FOR DELETE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );

Você pode executar esta migração diretamente pelo painel do Supabase (SQL Editor) ou via CLI.

Gerar Tipos TypeScript

You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

Construir a Interface do Usuário

Agora vem a parte mais poderosa do vibecoding. Dê ao Claude Code instruções de alto nível:

You: Create a dashboard page for the task management app with:

1. Sidebar with navigation between projects
2. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3. Modal to create/edit tasks
4. Header with user avatar and logout
5. Modern design with shadcn/ui and Tailwind

Use data from Supabase with React Server Components where possible
and Client Components only where interactivity is needed.

Claude Code construirá toda a interface, componente por componente.

Adicionar Autenticação

You: Add a complete authentication system with:

1. Login page with email/password and GitHub login
2. Registration page
3. Middleware to protect authenticated routes
4. Automatic redirect for unauthenticated users
5. Automatic profile creation after registration

Claude Code configurará o middleware do Next.js e as páginas de autenticação:

// src/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone();
    url.pathname = '/auth/login';
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
};

5. Padrões Avançados de Vibecoding

Prompting Iterativo

O segredo do vibecoding eficaz é a iteração. Não tente descrever tudo em um único prompt. Proceda em etapas:

Step 1: "Create the base layout with header and sidebar"
Step 2: "Add the project list in the sidebar with a button to create new ones"
Step 3: "Create the Kanban view in the main area"
Step 4: "Add drag & drop between columns"
Step 5: "Implement the modal to create new tasks"
Step 6: "Add toast notifications for user feedback"

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.

Tratamento de Erros

Quando algo não funciona (e vai acontecer), você pode simplesmente dizer:

You: I'm getting this error in the console: "TypeError: Cannot read property
'map' of undefined" in the TaskList component. Fix it.

Claude Code analisará o código, identificará o problema e o corrigirá.

Refatoração com IA

You: The Dashboard component has become too large. Split it into smaller,
reusable components while maintaining the same functionality.

Testes

You: Add tests with Vitest for utility functions and Playwright tests for
the authentication and task creation flow.

6. Deploy no Vercel: Do Código para o Mundo

Passo 1: Push para o GitHub

You: Create an appropriate .gitignore, commit everything, and push to a new
GitHub repository called "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

Passo 2: Conectar o Vercel

1. Vá para vercel.com e clique em "Add New Project."
2. Importe o repositório GitHub que você acabou de criar.
3. Adicione as variáveis de ambiente:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Clique em "Deploy."

Passo 3: Configurar um Domínio Personalizado (Opcional)

Vercel fornece uma URL gratuita como my-demo-app.vercel.app. Para um domínio personalizado:

You: Add the configuration for a custom domain in vercel.json

Deploys de Preview

Toda 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.

7. Otimizações para Sua Demo

Performance

You: Optimize the app's performance:
1. Add loading states with Suspense and skeletons
2. Implement caching with Next.js unstable_cache
3. Optimize images with next/image
4. Add SEO metadata for each page

Realtime com Supabase

Uma funcionalidade que sempre impressiona em demos é o realtime:

You: Add realtime synchronization for tasks using Supabase Realtime.
When a user updates a task, all other users should see the change
in real time without refreshing.

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';
import type { Task } from '@/types/database';

export function useRealtimeTasks(projectId: string) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const supabase = createClient();

  useEffect(() => {
    const channel = supabase
      .channel('tasks-changes')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'tasks',
          filter: `project_id=eq.${projectId}`,
        },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setTasks((prev) => [...prev, payload.new as Task]);
          } else if (payload.eventType === 'UPDATE') {
            setTasks((prev) =>
              prev.map((t) =>
                t.id === payload.new.id ? (payload.new as Task) : t
              )
            );
          } else if (payload.eventType === 'DELETE') {
            setTasks((prev) =>
              prev.filter((t) => t.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [projectId, supabase]);

  return tasks;
}

Modo Escuro

You: Add dark mode support with a toggle in the header.
Use Tailwind dark classes and save the preference in localStorage.

8. Melhores Práticas para Vibecoding Eficaz

1. Seja Específico nos Seus Prompts

❌ "Make a nice page"
✅ "Create a landing page with a hero section with a purple-blue gradient,
   a features section with 3 cards with icons, and an orange CTA button"

2. Forneça Contexto

❌ "Add authentication"
✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
   Router with TypeScript. I want email/password login and OAuth with GitHub.
   Use the SSR pattern with @supabase/ssr"

3. Itere em Pequenos Passos

Não tente construir tudo em um único prompt. Proceda incrementalmente:

1. Layout base
2. Uma funcionalidade por vez
3. Estilo e polimento
4. Tratamento de erros
5. Testes

4. Revise o Código Gerado

Vibecoding não significa não ler o código. Sempre revise:

• Segurança: políticas RLS, validação de entrada, sanitização de dados.
• Performance: queries N+1, componentes client-side desnecessários.
• Melhores práticas: estrutura do projeto, convenções de nomenclatura.

5. Use Git Estrategicamente

You: Commit the changes with a descriptive message after each completed feature.

Isso permite reverter se algo der errado.

9. Custos: É Realmente Tudo Gratuito?

Aqui está uma análise de custos para cada serviço:

| Serviço | Plano Gratuito | Quando Você Paga | |---------|-----------|-------------| | Claude Code | Requer um plano Anthropic (a partir de $20/mês) ou chave API | Imediatamente, mas o valor é enorme | | Supabase | Plano gratuito generoso (2 projetos, 500MB DB) | Além dos limites do plano gratuito | | Vercel | Plano gratuito para projetos pessoais | Para equipes ou uso comercial | | GitHub | Gratuito para repos públicos e privados | Funcionalidades enterprise |

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.

Alternativas de IA Gratuitas

Se você quiser manter os custos absolutamente zero, pode usar:

• Cursor (plano gratuito com limitações).
• GitHub Copilot (gratuito para estudantes e open source).
• Codeium/Windsurf (plano gratuito generoso).

10. Da Demo ao Produto: Próximos Passos

Uma vez que sua demo esteja no ar, aqui está como proceder:

1. Colete feedback: compartilhe a demo com potenciais usuários e reúna opiniões.
2. Itere rapidamente: use vibecoding para implementar mudanças solicitadas.
3. Monitore métricas: Vercel Analytics e Supabase Dashboard fornecem dados essenciais.
4. Escale quando necessário: atualize para planos pagos apenas quando a demanda for validada.

Conclusão

Vibecoding 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.

A 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.

O 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.

Checklist para sua primeira demo:

• [x] Claude Code instalado e configurado
• [x] Projeto Supabase criado com schema do banco de dados
• [x] Projeto Next.js inicializado com shadcn/ui
• [x] Autenticação configurada
• [x] CRUD completo implementado
• [x] UI moderna e responsiva
• [x] Deploy feito no Vercel
• [x] URL compartilhável pronta para feedback