#MeuDinheiro

Controle financeiro pessoal simples e bonito. Registre receitas e despesas, acompanhe seu saldo e visualize seu historico financeiro.

#Stack

• Next.js 16 (App Router, Server Components, Server Actions)
• TypeScript
• Tailwind CSS v4 + shadcn/ui
• Prisma 7 + Supabase PostgreSQL
• Framer Motion (animacoes)
• jose (JWT, edge-compatible)
• Sonner (toasts)
• Vitest + Testing Library (testes)

#Pre-requisitos

• Node.js 18+
• Conta no Supabase (gratuito)

#Setup

#1. Instalar dependencias

npm install

#2. Configurar Supabase

1. Criar projeto no Supabase (regiao: South America - Sao Paulo)
2. Ir em Settings > Database
3. Copiar a Connection string (URI) — Transaction mode, porta 6543

#3. Configurar variaveis de ambiente

Criar .env.local na raiz do projeto:

DATABASE_URL="postgresql://postgres.SEU-PROJECT-REF:SUA-SENHA@aws-0-sa-east-1.pooler.supabase.com:6543/postgres?pgbouncer=true"
JWT_SECRET="gere-uma-string-segura-com-32-caracteres-minimo"

#4. Criar tabelas no banco

npx prisma db push

Verificar no Supabase Dashboard > Table Editor se as tabelas User, Category e Transaction foram criadas.

#5. Gerar Prisma Client

npx prisma generate

#6. Rodar o projeto

npm run dev

Abrir http://localhost:3000.

#Scripts

#Deploy na Vercel

#1. Preparar

npm run build  # verificar que compila sem erros

#2. Importar na Vercel

1. Vercel Dashboard > Add New > Project
2. Conectar GitHub e selecionar o repositorio
3. Adicionar Environment Variables antes do deploy:
   • DATABASE_URL = connection string do Supabase
   • JWT_SECRET = string segura de 32+ caracteres
4. Clicar Deploy

#3. Dominio customizado (opcional)

1. Vercel > Settings > Domains > Add Domain
2. Configurar DNS na Cloudflare (ou outro provider):
   • www como CNAME apontando para cname.vercel-dns.com
   • @ como A record para o IP da Vercel
   • Proxy Cloudflare: DNS only (cinza, nao laranja)

#Estrutura do Projeto

src/
├── app/
│   ├── (auth)/          # Login e registro (sem nav)
│   │   ├── login/
│   │   └── register/
│   ├── (app)/           # App autenticado (com nav)
│   │   ├── page.tsx     # Dashboard
│   │   ├── transactions/
│   │   └── profile/
│   ├── layout.tsx       # Root layout
│   └── globals.css      # CSS variables e tema
├── components/          # Componentes React
├── actions/             # Server Actions
├── lib/                 # Utilitarios (auth, db, format, validations)
├── types/               # TypeScript types
└── __tests__/           # Testes unitarios

#Funcionalidades

• Cadastro e login com JWT em httpOnly cookie
• Dashboard com saldo, semaforo financeiro e ultimas transacoes
• Registro de transacoes com teclado numerico e categorias visuais
• Categorias separadas para despesas e receitas
• Historico com filtros por periodo (hoje/semana/mes)
• Exclusao com swipe e undo (3s)
• Perfil com avatar de iniciais e logout
• Animacoes com Framer Motion (counter, fade, slide, spring)
• Layout desktop: phone frame + guia do aluno side-by-side
• Dark mode nativo
• 117 testes unitarios

#Variaveis de Ambiente