SaldoCerto

Suas finanças no controle. Sem enrolação.

Informe quanto você ganha, organize seus gastos por categorias e descubra quanto sobra no final do mês. Sem cadastro, sem complicação.

Acessar Plataforma

---

Sobre

O SaldoCerto é uma aplicação web de gestão financeira pessoal que permite ao usuário controlar sua renda mensal, organizar gastos por categorias personalizadas e visualizar percentuais de distribuição — tudo em tempo real, diretamente no navegador, sem necessidade de cadastro ou servidor.

Os dados são armazenados exclusivamente no localStorage do navegador, garantindo total privacidade e persistência entre sessões.

Funcionalidades

• Controle de Renda — Informe sua renda mensal e acompanhe automaticamente quanto já foi gasto e quanto sobra
• Categorias Livres — Crie quantas categorias quiser (eletrônicos, alimentação, transporte, lazer...) e organize do seu jeito
• Itens por Categoria — Adicione, edite e remova gastos dentro de cada categoria com nome, valor e data
• Saldo em Tempo Real — Barra de progresso do orçamento com alertas visuais (verde, laranja, vermelho)
• Percentuais por Categoria — Visualize quanto cada categoria representa dos seus gastos totais e da sua renda
• Zero Enrolação — Sem cadastro, sem e-mail, sem senha. Abriu? Tá usando. Fechou? Seus dados continuam lá
• Privacidade Total — Nenhum dado é enviado a servidores; tudo fica salvo localmente no seu navegador
• Design Responsivo — Interface adaptável para desktop, tablet e mobile
• Dark Mode Nativo — Interface escura moderna para conforto visual

Como Usar

1. Defina sua renda — Insira quanto você recebe por mês no campo "Sua renda mensal"
2. Crie categorias — Adicione categorias como "Alimentação", "Transporte", "Lazer", "Eletrônicos" etc.
3. Adicione gastos — Dentro de cada categoria, registre seus gastos com nome, valor e data
4. Acompanhe — Veja o saldo restante, a barra de orçamento e a distribuição percentual por categoria

Tecnologias

Camada	Tecnologia
Estrutura	HTML5
Estilização	CSS3 (Custom Properties, Grid, Flexbox, Animations)
Lógica	JavaScript Vanilla (ES6+)
Persistência	localStorage
Tipografia	Google Fonts — Inter
Design	Design próprio via Penpot

Estrutura do Projeto

SaldoCerto/
├── index.html          # Landing page
├── app.html             # Aplicação principal de gestão financeira
├── css/
│   ├── style.css        # Estilos globais e da landing page
│   └── app.css          # Estilos da aplicação principal
├── js/
│   ├── landing.js       # Menu mobile, scroll suave e animações
│   └── app.js           # Lógica completa da aplicação (CRUD, render, persistência)
└── SaldoCerto.pen        # Arquivo de design original (Penpot)

Arquitetura

A aplicação é totalmente client-side, sem dependência de frameworks ou back-end:

• app.js — Gerencia o estado global (categories, monthlyIncome), persistência via localStorage, renderização dinâmica do DOM, e lógica de CRUD para categorias e gastos
• landing.js — Controla o menu mobile responsivo, scroll suave para âncoras e animações de reveal com IntersectionObserver
• CSS Custom Properties — Sistema de design tokenizado com variáveis para cores, espaçamentos, sombras e transições, garantindo consistência visual
• Sem build step — O projeto roda diretamente abrindo os arquivos HTML no navegador ou servindo via GitHub Pages

Destaques Visuais

• Gradientes personalizados com efeito de glow e animações suaves
• Barras de progresso com transição animada e estados de cor (normal, warning, danger)
• Modal com backdrop blur para adição e edição de gastos
• Cards de categoria com barra de cor dinâmica no topo
• Animações de entrada com IntersectionObserver na landing page

Licença

Projeto acadêmico. © 2025 SaldoCerto.