BalanceFlow é um gerenciador de acertos financeiros pessoais moderno, rápido, focado em usabilidade e totalmente responsivo. Controle quem lhe deve dinheiro e a quem você deve de forma prática através de uma Single Page Application (SPA) intuitiva, projetada para funcionar perfeitamente em computadores e dispositivos móveis.
🌐 Acesse o app: https://balanceflow.netlify.app/
Aviso importante: Este projeto foi totalmente vibecodado! ✨🤖
- Cálculo de Saldo Líquido Automático: O sistema consolida todas as movimentações e exibe o saldo de cada pessoa destacado em cores (Verde para saldo positivo/a receber, Vermelho para saldo negativo/a pagar e Cinza para saldo zerado).
- Cards de Sumário Geral: Na tela inicial, tenha uma visão geral instantânea de:
- A Receber (Total acumulado de créditos).
- A Pagar (Total acumulado de débitos).
- Saldo Líquido (Diferença entre o que deve e o que tem a receber).
- Modo Offline (LocalStorage): Se você quer privacidade total ou um uso rápido sem configurações adicionais, basta ativar o Modo Offline nas configurações. Todos os dados (pessoas, grupos e transações) serão armazenados de forma 100% local no próprio navegador do aparelho.
- Modo Cloud (Firebase Firestore): Configurando as credenciais do seu Firebase pessoal, todos os dados são sincronizados na nuvem, permitindo que você acesse e altere as informações em múltiplos dispositivos em tempo real.
- Segurança de Dados Local: Chaves de API, credenciais Firebase, configurações regionais e a sua chave PIX são guardados estritamente na memória local do seu aparelho (
localStorage), nunca sendo expostos ou enviados para servidores de terceiros.
- Busca em Tempo Real: Filtre facilmente seus contatos digitando no campo de pesquisa.
- Criação e Gestão de Grupos:
- Selecione pessoas e salve-as como um grupo personalizado (ex: "Viagem", "República", "Família").
- Painel de gerenciamento de grupos com indicador de total de membros e destaque para quantos membros estão arquivados.
- Edição de grupos (alteração do nome e inclusão/remoção rápida de membros por checkboxes).
Uma barra de ferramentas flutuante inferior (estilo bottom sheet) surge automaticamente ao selecionar contatos da lista, permitindo:
- Arquivamento e Desarquivamento em Massa: Limpe sua lista principal arquivando contatos resolvidos ou reative-os com um clique.
- Exclusão em Lote: Remova múltiplas pessoas simultaneamente.
- Criação de Grupos: Salve a seleção ativa como um grupo imediatamente.
- Cobrança Consolidada: Gere textos de cobrança unificados com todos os contatos selecionados de uma vez.
- Divisão de Contas Coletiva: Dispare divisões rápidas de despesas entre as pessoas selecionadas.
Ao selecionar duas ou mais pessoas, você pode dividir uma despesa coletiva em dois formatos:
- Partes Iguais: Informe o valor total da conta e o sistema calculará e lançará a divisão igualitária para todos os envolvidos.
- Valores Exatos: Perfeito para quando cada integrante consumiu valores diferentes (ex: pratos individuais). Insira o valor correspondente para cada pessoa da lista em tempo real.
- O app lança automaticamente registros de "Me Deve" com a descrição (ex: "Pizza", "Gasolina") e a data definida nos perfis de cada um dos selecionados.
Ao abrir o perfil de uma pessoa, você tem acesso completo ao histórico:
- 4 Botões de Ações Rápidas:
Me Deve(Transação de crédito).Eu Devo(Transação de débito).Pgto Recebido(Registra que a pessoa te pagou).Pgto Feito(Registra que você pagou a pessoa).
- Zerar Dívida: Um botão rápido que calcula a liquidação exata necessária e abre o modal de inserção pré-preenchido para zerar o saldo em um clique.
- Edição e Exclusão Individual: Altere o valor, descrição ou data de qualquer registro passado no histórico, ou exclua-o para recalcular o saldo da pessoa.
- Copie com facilidade um texto de cobrança personalizado com o saldo devedor e a sua chave PIX configurada.
- Funciona para envio individual ou em lote (com a listagem detalhada de quem deve quanto).
- Alternador entre listas de Ativos e Arquivados.
- Prevenção de Erros de Seleção: Não é permitido selecionar pessoas ativas e arquivadas simultaneamente. Ao alternar entre as abas, a seleção é resetada e limpa para evitar lançamentos incorretos ou arquivamentos indevidos.
- Interface Moderna: Acabamento com efeito de vidro (glassmorphism), cabeçalho fixo com desfoque de fundo e sombras suaves.
- Micro-animações: Transições suaves ao abrir/fechar modais, efeito hover dinâmico nos botões, ícone de configurações giratório e carregamento de listas com efeito cascata gradual (fade in up).
- Botão Voltar ao Topo: Aparece sutilmente no canto inferior direito conforme a rolagem da página, permitindo o retorno imediato ao topo da lista.
- Toasts de Feedback: Alertas elegantes e flutuantes para confirmar ações como cópia de chaves, sucesso ao salvar dados ou exclusões de registros.
- Estrutura: HTML5 Semântico.
- Estilo: Tailwind CSS (carregado via CDN com configurações estendidas de fontes e cores) + CSS customizado para animações e controle fino de modais e componentes.
- Programação: Vanilla JavaScript moderno (ES Modules, manipulação nativa do DOM, sem frameworks de terceiros).
- Ícones: Biblioteca Lucide Icons.
- Banco de Dados Cloud: Firebase Web SDK v10 (Firestore) integrado de forma modular.
- Acesse o aplicativo BalanceFlow.
- Abra as Configurações clicando no ícone de engrenagem no canto superior direito.
- Ative a chave "Modo Offline".
- Configure sua Moeda (ex:
R$,$,€), o Separador Decimal (vírgula,ou ponto.) e a sua Chave PIX. - Clique em Salvar Configurações. Pronto! O aplicativo está pronto para usar e salvará tudo localmente.
Para salvar na nuvem e sincronizar em múltiplos celulares ou computadores:
- Acesse o Firebase Console e crie um projeto gratuito.
- Crie um banco de dados Firestore Database (selecione a opção de iniciar em modo de produção/production mode).
- Vá na aba de Regras (Rules) do seu Firestore e altere para permitir leitura/escrita para uso pessoal:
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if true; } } }
- Na tela inicial do console do projeto (Project Overview), clique em adicionar um aplicativo Web (
</>) e dê um nome. - O console exibirá as chaves do Firebase. Copie apenas o objeto JSON
firebaseConfig(contendoapiKey,authDomain,projectId, etc). - Nas configurações do BalanceFlow, desative o "Modo Offline", cole o JSON copiado no campo do Firebase, configure sua Chave PIX, Moeda e Separador Decimal preferido e clique em Salvar.
- O aplicativo irá carregar e manter os dados sincronizados em tempo real com a nuvem.
Este projeto é distribuído sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Desenvolvido com carinho por ArthurWillers. Código-fonte disponível no GitHub.