Webapp pessoal para gerenciamento de orçamento: controle de receitas e despesas, categorias, meios de pagamento e previsão mensal. Os dados ficam no navegador (localStorage); não há backend nem conta. Ideal para uso local na sua rede.
- Lançamento de transações: receitas e despesas com descrição, valor, data, categoria e meio de pagamento (opcional).
- Categorias: listas padrão de receitas e despesas; é possível editar (adicionar, remover e renomear). Ao renomear, as transações antigas são atualizadas para a nova categoria.
- Meios de pagamento: cadastro de cartões (crédito/débito), PIX, dinheiro etc., com limite opcional por cartão.
- Acompanhamento por cartão: gastos do mês por meio de pagamento; para cartões com limite, exibe consumo do limite e valor disponível.
- Resumo e gráficos: totais (receita, despesa, saldo), gráfico mensal (últimos meses) e breakdown por categoria.
- Histórico por mês: seletor Período (Todos ou um mês específico). Ao escolher um mês, os cards, breakdown por categoria, gastos por meio de pagamento e a lista de transações passam a refletir só aquele mês.
- Previsão: previsão dos próximos meses com base na média dos últimos três.
Tudo é salvo localmente no dispositivo; não há envio de dados para servidor.
- Vite + React + TypeScript
- Tailwind CSS + shadcn/ui (Radix)
- Recharts para gráficos
- Dados em localStorage (sem backend)
Requisito: Node.js 18+ e npm.
# Clone o repositório (ou baixe e extraia)
git clone <URL_DO_REPOSITORIO>
cd budget
# Instale as dependências
npm install
# Suba o servidor de desenvolvimento (com recarregamento automático)
npm run devAcesse http://localhost:8080 (ou a URL exibida no terminal).
Para gerar o build de produção:
npm run buildOs arquivos estáticos ficam em dist/. Para testar o build localmente:
npm run previewRecomendado para rodar em um PC da sua rede (Windows ou Linux) com Docker e Docker Compose. O app é servido via nginx na porta 80 do container; você pode mapear para a porta que quiser no host.
-
Docker e Docker Compose instalados no PC que fará de “servidor”.
- Linux: Docker Engine e Docker Compose (ou
docker composejá incluso na instalação do Docker). - Windows: Docker Desktop for Windows (já inclui o Compose).
- Linux: Docker Engine e Docker Compose (ou
-
Abra um terminal na pasta do projeto (onde estão
Dockerfileedocker-compose.yml). -
Construa e suba o serviço:
docker compose up -d --build
-
Acesse no navegador:
- http://localhost:8080 (ou
http://IP_DO_PC:8080de outro dispositivo na mesma rede).
- http://localhost:8080 (ou
-
Para parar:
docker compose down
-
Para usar outra porta no host (ex.: 80), edite
docker-compose.yml:ports: - "80:80"
Depois:
docker compose up -d --build.
-
Abra PowerShell ou Prompt de Comando e vá até a pasta do projeto:
cd C:\caminho\para\budget
-
Construa e inicie o container:
docker compose up -d --build
-
Acesse no navegador:
- http://localhost:8080 (ou
http://IP_DO_PC:8080de outro dispositivo na rede).
- http://localhost:8080 (ou
-
Para parar:
docker compose down
-
Para expor na porta 80 do host, altere em
docker-compose.yml:ports: - "80:80"
Em seguida execute novamente:
docker compose up -d --build.
| Arquivo | Função |
|---|---|
Dockerfile |
Build da aplicação (Node) e imagem final com nginx servindo o dist/. |
nginx.conf |
Configuração do nginx (SPA: fallback para index.html). |
docker-compose.yml |
Define o serviço e o mapeamento de porta (ex.: 8080:80). |
O app roda sozinho em um único container; não há banco de dados. Os dados continuam sendo armazenados no localStorage do navegador de quem acessa (cada dispositivo/ navegador tem seu próprio conjunto de dados).
O desenho do app segue práticas comuns em aplicativos de finanças pessoais:
- Visibilidade: visão clara de receitas, despesas e saldo; filtro por período (mês) para análise temporal.
- Histórico e filtros: seletor de mês para consultar meses anteriores; listagem de transações e totais coerentes com o período escolhido.
- Categorização: categorias editáveis e associação de transações a categorias e a meios de pagamento.
- Múltiplos “contas”: meios de pagamento (cartões, PIX etc.) com acompanhamento de gasto e limite quando aplicável.
- Previsão: projeção simples com base em médias recentes.
- Privacidade: dados apenas no dispositivo (localStorage), sem servidor de aplicação nem envio para terceiros.
Para uso em rede local, o servidor (Docker) apenas entrega os arquivos estáticos do app; a persistência continua no navegador de cada usuário.
| Comando | Descrição |
|---|---|
npm run dev |
Servidor de desenvolvimento |
npm run build |
Build de produção em dist/ |
npm run preview |
Servir o dist/ localmente |
npm run lint |
Executar o ESLint |
npm run test |
Executar os testes |
Se o repositório foi criado localmente e você quer enviar para o GitHub:
- Crie um repositório vazio no GitHub (sem README, .gitignore ou licença).
- Na pasta do projeto, adicione o remote e faça o push:
git remote add origin https://github.com/SEU_USUARIO/budget.git
git push -u origin mainSubstitua SEU_USUARIO/budget pela URL do seu repositório (ou use a URL SSH se preferir).
Uso pessoal. Ajuste e redistribuição conforme sua necessidade.