AI Vibe Coding
Comente FINANCEIRO2 no Instagram @gastaomatos

App de Finanças Pessoais com IA

A maioria das pessoas não sabe quanto sobra no fim do mês porque não tem onde olhar. Esse app resolve isso com uma tela só, importa o CSV do seu banco e a IA classifica cada lançamento.

O que muda quando você sabe o saldo real

  • Você vê o quanto entra, o quanto é fixo e o quanto sobra antes de gastar
  • Decisão de compra parcelada deixa de ser emocional e vira matemática
  • Identifica em qual categoria o dinheiro vaza no mês (delivery, assinaturas, transporte)
  • Reserva de emergência cresce porque você consegue separar o que sobra logo no dia 5
  • O fim do mês deixa de ser surpresa

Por que esse app é diferente do gerenciador empresarial

O gerenciador financeiro empresarial é feito para sócios, contador e fluxo de caixa de empresa. Esse aqui é pessoal: foca em uma única conta, uma pessoa só, e a métrica principal é "quanto sobra esse mês". Sem categoria contábil, sem DRE, sem nota fiscal. É um app de visão única para quem só quer não chegar no dia 25 sem saber para onde foi o salário.

Stack que usei

  • Next.js 16 com App Router (Server Components por padrão)
  • Drizzle ORM com Postgres no Neon (plano grátis 512MB)
  • Stack Auth para login com Google em 2 minutos
  • shadcn/ui + Tailwind CSS v4 para a interface
  • Anthropic Claude API para classificar transações importadas
  • Vercel para deploy automático a cada push

Prompt completo para Claude Code

Cole no Claude Code dentro de uma pasta vazia:

prompt
Crie um app de finanças pessoais em Next.js 16 com App Router.

Schema do banco (Drizzle ORM + Neon):
transactions (
  id text primary key,
  user_id text not null,
  type text not null,  // entrada | saida
  amount integer not null,  // em centavos
  category text not null,  // alimentacao | transporte | moradia | lazer | saude | assinaturas | outros
  date date not null,
  description text not null,
  recurring boolean default false,
  created_at timestamp default now()
)

import_batches (
  id text primary key,
  user_id text not null,
  filename text not null,
  total_rows integer,
  status text,
  created_at timestamp default now()
)

Páginas:
- / (Dashboard): saldo do mês, total de entradas, fixas, variáveis e sobra real
- /transactions: lista paginada com filtro por categoria e data
- /import: upload de CSV com pré-visualização e confirmação
- /recurring: tela só pra cadastrar entradas e saídas fixas

Cálculo da sobra real:
sobra = entradas do mês - saidas fixas do mês - saidas variaveis do mês

Importação CSV:
1. Usuário sobe arquivo .csv do extrato bancário
2. Server Action lê o CSV com csv-parse
3. Para cada linha, chama Claude (claude-3-5-sonnet) com prompt:
   "Classifique essa transação em uma das categorias: alimentacao,
    transporte, moradia, lazer, saude, assinaturas, outros.
    Retorne só o nome da categoria.
    Descrição: [descrição da linha]"
4. Mostra preview com checkbox por linha pra usuário confirmar
5. Insert em batch no Drizzle dentro de uma transaction

Autenticação:
Stack Auth com provider Google. Toda query no banco filtra por user_id
do contexto da sessão (request scoped).

Server Actions com validação Zod:
- createTransaction
- updateTransaction
- deleteTransaction
- importCsv (recebe FormData com file)
- toggleRecurring

Tela do dashboard:
Componente Server Component que faz uma única query agregada:
SELECT
  SUM(CASE WHEN type = 'entrada' THEN amount ELSE 0 END) as entradas,
  SUM(CASE WHEN type = 'saida' AND recurring = true THEN amount ELSE 0 END) as fixas,
  SUM(CASE WHEN type = 'saida' AND recurring = false THEN amount ELSE 0 END) as variaveis
FROM transactions
WHERE user_id = $1
  AND date >= date_trunc('month', current_date)
  AND date < date_trunc('month', current_date) + interval '1 month'

Renderiza 4 cards grandes: Entradas, Fixas, Variáveis, Sobra (em verde se positiva, vermelho se negativa).

Componentes shadcn/ui necessários:
card, button, input, label, table, dialog, select, badge, separator, alert

Variáveis de ambiente:
DATABASE_URL (Neon connection string)
STACK_PROJECT_ID, STACK_SECRET_SERVER_KEY, STACK_PUBLISHABLE_CLIENT_KEY
ANTHROPIC_API_KEY

Deploy: Vercel com integração Neon. Stack Auth provisiona em 1 clique.

Como rodar o projeto

  • pnpm install
  • pnpm drizzle-kit generate (gera as migrations)
  • pnpm drizzle-kit migrate (aplica no Neon)
  • pnpm dev (sobe em localhost:3000)
  • git push (Vercel faz deploy automático)

Por que cada peça da stack

  • Next.js 16: Server Components reduzem JavaScript no cliente, app abre rápido até no celular antigo
  • Drizzle: query builder com type safety total, sem ORM pesado, queries SQL puras quando precisa
  • Neon: Postgres serverless com cold start de 200ms e plano grátis decente
  • Stack Auth: login social pronto sem configurar provider manualmente
  • Claude para classificar: o modelo entende "iFood pizza" como alimentacao sem você precisar treinar nada

Telas do app que você terá

  • Dashboard com saldo do mês corrente em destaque grande
  • Importação de CSV com preview e edição linha a linha
  • Lista de transações com filtro de categoria e busca por texto
  • Tela de recorrentes onde você marca o que é fixo
  • Botão para fechar o mês e arquivar (vira histórico)

Perguntas frequentes

Funciona com qualquer banco brasileiro?

Funciona com qualquer banco que exporte CSV do extrato. Nubank, Itaú, Inter, C6, BTG, Caixa e Bradesco têm exportação nativa. Para bancos sem CSV, dá pra adaptar o importador pra ler PDF com extração de tabela.

A IA classifica errado às vezes?

O Claude acerta cerca de 92% das transações de cara. Por isso o passo de preview existe: você revisa antes de confirmar. As correções viram exemplos no system prompt e a taxa de acerto sobe pra mais de 97%.

Quanto custa rodar o app?

R$ 0 no plano grátis. Neon grátis até 512MB (suficiente pra anos de transações), Vercel grátis no plano hobby, Stack Auth grátis até 10 mil usuários. A única conta variável é a API da Anthropic, que sai menos de R$ 1 por mês pra uso pessoal.

Os meus dados financeiros ficam seguros?

O banco está no seu Neon, na sua conta. Stack Auth garante que só você acessa via login Google. A Anthropic não armazena prompts via API e só recebe a descrição da transação, sem nome, conta ou valor.

Dá pra usar no celular?

Sim. O Next.js já entrega responsivo via Tailwind e funciona como PWA se você adicionar o manifest.json. Você abre no Chrome do celular, instala como app e usa offline pra ver o saldo do mês.

Quer implementar isso?

Me chama no WhatsApp. Ajudo você a configurar ou implemento pra você.

Quero ajuda no WhatsApp
DT

Gastão Matos

@gastaomatos