App brasileiro para controlar gastos — simples, rápido e bonito. Um único código-base roda como app mobile (iOS/Android) e como app web, graças ao Expo + React Native Web.
Foco em uma coisa só: lançar gastos. Sem distrações, poucos menus, cada lançamento é satisfatório de fazer. 🇧🇷
- 📱💻 Dois apps, um código: mobile (Expo) e web (React Native Web).
- ☁️ Login + sincronização na nuvem via Supabase — seus gastos no celular e na web, sempre iguais.
- ➕ Lançamento rápido: botão flutuante em qualquer tela, teclado numérico e máscara automática de R$ (Real brasileiro).
- 🎉 Dopamina a cada gasto: animação de comemoração + vibração (haptics).
- 🗂️ Categorias e subcategorias com ícones bonitos e busca — já vêm várias criadas (Alimentação, Transporte, Moradia, Saúde, Lazer...).
- 📺 Categoria "Assinaturas" com os logos reais dos principais serviços (Netflix, Spotify, Uber, iFood, Disney+, Amazon Prime, Apple Music, Google, Microsoft 365, HBO Max, PlayStation, e mais).
- 🔎 Busca de categorias e subcategorias.
- 📊 Visualizar gastos: o mesmo período por vários ângulos — categorias (donut até o item da notinha), linha do tempo (dia a dia ou mês a mês, com média e dia mais caro), meio de pagamento, locais, dia da semana e a lista completa por data ou por valor.
- 💳 Meios de pagamento: cadastre "Nubank (Pix)", "Banco do Brasil (Crédito)"... com os logos dos principais bancos (Nubank, Itaú, BB, Bradesco, Caixa, Santander, Inter, C6, PicPay, Mercado Pago e mais) e escolha no lançamento.
- 📍 Onde foi o gasto: nome do estabelecimento ou link do Google Maps (cola o link e o nome do lugar sai dele). Sugere os lugares que você já usou.
- 📅 Controle no tempo: visão mensal e anual, com navegação entre períodos.
- 🚨 Alertas de gasto excessivo: aba Meus Limites para definir tetos (gerais ou por categoria) — o app avisa ao chegar a 80% e ao ultrapassar.
- 🌗 Tema claro e escuro (ou automático, seguindo o sistema).
- 🧾 Notinha com leitura automática, por dois caminhos:
- QR Code do cupom (preferido): os itens vêm direto do portal da SEFAZ — exatos, de graça e sem enviar imagem para lugar nenhum.
- Foto da nota: para o que não tem QR (feira, padaria, recibo). Um modelo lê a imagem e separa os itens. Nos dois casos o app guarda cada item da compra (descrição, quantidade, valor), mais mercado, CNPJ, data e forma de pagamento. Os itens detalham o gasto — o total do mês continua sendo só o valor do lançamento.
- 📈 Itens no gráfico: na tela de gráficos a árvore vai até o fim — categoria › subcategoria › lançamento › itens daquela compra.
- 📗 Relatório com os itens: a planilha exportada ganha a aba Itens e um Top produtos no resumo.
- 🗑️ Excluir conta a qualquer momento (apaga todos os dados).
- Node.js 18+
- App Expo Go no celular (Android/iOS) para testar no aparelho — opcional.
npm install- Crie uma conta gratuita em supabase.com e um novo projeto.
- No painel do projeto, abra SQL Editor e rode todo o conteúdo do arquivo
supabase/schema.sql. Isso cria as tabelas e as regras de segurança (cada usuário só vê os próprios dados). - Vá em Project Settings → API e copie:
- Project URL
- chave
anonpublic
- Crie o arquivo de ambiente a partir do exemplo:
e preencha:
cp .env.example .env
EXPO_PUBLIC_SUPABASE_URL=https://SEU-PROJETO.supabase.co EXPO_PUBLIC_SUPABASE_ANON_KEY=sua-anon-key-publica
Se você abrir o app sem configurar o
.env, ele mostra uma tela explicando exatamente esses passos.
Atualizando um banco já existente? O
schema.sqlé idempotente — pode rodar de novo com segurança. Ele inclui a funçãodelete_account(), usada pela opção "Excluir conta".
O app entra sem senha — só com a conta Google.
Google:
- Em Authentication → Providers → Google, ative e preencha o Client ID/Secret (criados no Google Cloud Console).
- Em Authentication → URL Configuration, adicione as Redirect URLs:
meusgastos://(app mobile)- a URL do seu site web (ex.:
http://localhost:8081em dev e a de produção)
A foto vai para um bucket privado e é lida pela Edge Function
parse-receipt. O
schema.sql já cria o bucket receipts e as políticas de acesso — só falta a
chave do modelo:
cd meus-gastos-app # o CLI procura supabase/functions/ a partir daqui
supabase functions deploy parse-nfce # QR Code — não precisa de chave
supabase functions deploy parse-receipt # foto
supabase secrets set GEMINI_API_KEY=...A leitura por QR Code (parse-nfce)
é pública: consulta o portal da SEFAZ do próprio estado e não usa modelo nenhum.
Só a leitura por foto precisa de chave.
A leitura usa o Gemini (free tier do Google AI Studio) por padrão. Para
usar o Claude, RECEIPT_PROVIDER=anthropic + ANTHROPIC_API_KEY — o resto
do código é o mesmo.
Sem a chave, o resto do app funciona normalmente: só o botão de anexar avisa
que a leitura não está configurada. RECEIPTS_DAILY_LIMIT (padrão 40) limita
notinhas por usuário por dia, para um usuário sozinho não consumir a cota do
projeto inteiro.
Web (abre no navegador):
npm run webMobile (escaneie o QR Code com o Expo Go):
npm startou diretamente:
npm run android # Android
npm run ios # iOS (precisa de macOS)As primeiras categorias e subcategorias são criadas automaticamente no seu primeiro login.
app/ # Rotas (expo-router)
_layout.tsx # Providers + proteção de rotas (login)
onboarding.tsx # Boas-vindas (slides) na primeira vez
login.tsx # Entrar com Google ou e-mail (sem senha)
otp.tsx # Código de 6 dígitos enviado por e-mail
config.tsx # Tela de "falta configurar o Supabase"
novo.tsx # Lançar / editar gasto (com a comemoração)
notinha.tsx # Foto da nota em tela cheia
qrcode.tsx # Leitor do QR Code do cupom
categoria.tsx # Criar / editar categoria ou subcategoria
(tabs)/
index.tsx # Home: total do período, limites de gasto, lista
graficos.tsx # Gráfico de pizza por categoria (mês/ano)
categorias.tsx # Gerenciar e buscar categorias/subcategorias
limites.tsx # Meus Limites: tetos de gasto e alertas
ajustes.tsx # Tema, conta, excluir conta
src/
components/ # Componentes reutilizáveis (ícones, pickers, etc.)
context/ # AuthContext e DataContext (estado global)
data/ # Catálogo de ícones e categorias padrão
lib/supabase.ts # Cliente Supabase
lib/receipts.ts # Notinha: foto, QR, upload e leitura
lib/useReceipt.ts # Estado da notinha dentro do lançamento
lib/periodItems.ts # Itens do período (gráfico por item)
theme/ # Cores e ThemeContext (claro/escuro)
utils/ # Moeda (R$), datas, análises, haptics
types.ts # Tipos do domínio
supabase/schema.sql # Schema do banco (rodar no Supabase)
supabase/functions/ # Edge Functions (relatório por e-mail, notinha)
- Expo SDK 56 + React Native 0.85 + React 19
- expo-router (navegação baseada em arquivos)
- Supabase (autenticação + PostgreSQL + Row Level Security)
- react-native-reanimated (animações da comemoração)
- expo-haptics (vibração tátil)
- @expo/vector-icons (MaterialCommunityIcons)
-
Android (EAS):
eas build --platform android --profile preview # APK de teste eas build --platform android --profile production # .aab para a Play Store
-
Gerar ícones/splash a partir do mascote:
npm run gen:assets
-
Apps nativos: use o EAS Build:
npx eas build --platform android npx eas build --platform ios
O mascote é o Pim, um porquinho-cofrinho — símbolo universal de poupança e
dinheiro. Ele aparece animado na tela de login (respira, pisca e "engole"
uma moedinha de R$) e é a base do ícone do app, splash, favicon e da imagem de
compartilhamento (OpenGraph). Paleta de marca: teal #0EA5A4 → ciano #0891B2.
- Pacotes: iOS
com.meusgastos.app· Androidcom.meusgastos.app - Fonte: Space Grotesk (numerais marcantes, ótima para valores)