Meu Bolso — Controle Financeiro Pessoal

App web para controlar gastos e rendas: cadastro/login, lançamentos mensais, dashboard com gráficos, categorias, orçamento por categoria e lançamentos recorrentes (contas fixas).

Stack: React + Vite + Tailwind CSS · Supabase (Auth + Postgres) · Recharts

---

1. Pré-requisitos

• Node.js 18+ (você tem o 24, ok)
• Uma conta gratuita no Supabase

2. Criar o projeto no Supabase

1. Acesse https://supabase.com e crie um novo projeto (guarde a senha do banco).
2. No painel do projeto, vá em SQL Editor → New query.
3. Abra o arquivo supabase/schema.sql deste repositório, copie todo o conteúdo, cole no editor e clique em Run. Isso cria as tabelas, os índices, as regras de segurança (RLS) e as categorias padrão que são criadas junto com cada conta nova.
4. Em Project Settings → API, copie:
   • Project URL
   • anon public key

(Opcional) Desativar confirmação de e-mail para testar mais rápido

Em Authentication → Sign In / Providers → Email, desligue "Confirm email". Assim o cadastro já entra direto, sem precisar clicar num link no e-mail. Para produção, deixe ligado.

3. Configurar as variáveis de ambiente

cp .env.example .env

Edite o .env e preencha com os valores do passo anterior:

VITE_SUPABASE_URL=https://xxxxxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOi...

4. Rodar

npm install     # já feito
npm run dev

Abra http://localhost:5173, clique em Criar conta e comece a usar.

5. Build de produção

npm run build     # gera a pasta dist/
npm run preview   # serve o build localmente para conferir

6. Publicar na Vercel (recomendado para usar no celular)

1. Suba o código para um repositório no GitHub:

   git remote add origin https://github.com/SEU-USUARIO/meu-bolso.git
   git push -u origin main
   

2. Em vercel.com → Add New → Project → importe o repo. A Vercel detecta Vite sozinha; o vercel.json deste projeto já cuida das rotas SPA e do cache.
3. Em Environment Variables, adicione (mesmos valores do .env):
   • VITE_SUPABASE_URL
   • VITE_SUPABASE_ANON_KEY
4. Deploy. Você recebe uma URL https://....vercel.app.
5. No Supabase → Authentication → URL Configuration: coloque essa URL em Site URL e em Redirect URLs (senão confirmação de e-mail e "esqueci a senha" apontam para localhost).
6. No celular, abra a URL → menu do navegador → Adicionar à tela inicial. O app instala como PWA (ícone próprio, abre em tela cheia, o "casco" abre offline — os dados continuam exigindo internet).

Ícones do PWA

Ficam em public/ e são gerados de scripts/icon-source.svg:

npm run icons     # regenera após editar o SVG

---

Estrutura

src/
  lib/
    supabase.js      Cliente do Supabase (lê o .env)
    api.js           Todas as consultas ao banco (categorias, lançamentos,
                     orçamento, recorrentes)
    format.js        Formatação de moeda (R$), datas e utilidades de mês
  context/
    AuthContext.jsx  Sessão do usuário (login, cadastro, logout)
  components/
    Layout.jsx           Menu lateral + topo
    ProtectedRoute.jsx   Bloqueia rotas sem login
    Modal.jsx            Modal reaproveitável
    MonthNav.jsx         Navegação de mês (‹ Setembro de 2026 ›)
    TransactionForm.jsx  Formulário de gasto/renda
  pages/
    Login.jsx        /login
    Register.jsx     /cadastro
    Dashboard.jsx    /            Resumo do mês + gráficos
    Transactions.jsx /lancamentos Lista, filtro, criar/editar/excluir
    Categories.jsx   /categorias  CRUD de categorias com cor
    Budget.jsx       /orcamento   Limites por categoria + barra de progresso
    Recurring.jsx    /recorrentes Regras fixas + botão "Gerar do mês"
supabase/
  schema.sql         Script único para montar o banco

Modelo de dados

Tabela	Para quê
categories	Categorias de gasto ou renda, com cor
transactions	Cada lançamento (gasto/renda), com data e categoria
budgets	Limite mensal por categoria (ou geral) — 1 por categoria/mês
recurring_rules	Contas/rendas fixas; geram lançamentos no mês quando você pede

Todas as tabelas têm Row Level Security: cada usuário só lê e escreve os próprios dados (auth.uid() = user_id).

Como funcionam os recorrentes

Cadastre a regra (ex.: "Aluguel, R$ 1.500, todo dia 10, categoria Moradia"). Na tela Recorrentes, o botão Gerar do mês cria os lançamentos do mês atual para todas as regras ativas. Rodar de novo não duplica — há um índice único por (usuário, regra, mês). Se quiser 100% automático, dá para agendar isso depois com uma Edge Function + cron do Supabase.

Próximos passos possíveis

• Relatórios e exportação CSV/PDF (não incluído nesta versão)
• Metas de economia
• Contas/carteiras separadas
• App mobile (React Native) reaproveitando src/lib