Aplicação web moderna e completa para rastreamento e gerenciamento de despesas pessoais
🚀 Funcionalidades • 📸 Preview • 🛠️ Instalação • 📚 Como Usar • 🎨 Tecnologias
- ✅ CRUD Completo - Adicionar, visualizar, editar e excluir despesas
- ✅ 11 Categorias Pré-definidas - Alimentação, Transporte, Moradia, Compras, Saúde, Educação, Entretenimento, Trabalho, Esportes, Viagens e Outros
- ✅ Filtro por Categoria - Filtre despesas por categoria com interface visual intuitiva
- ✅ Busca Inteligente - Busque despesas por descrição ou categoria
- ✅ Resumo Financeiro - Visualize total, quantidade e média de despesas
- ✅ Persistência Local - Dados salvos automaticamente no navegador (LocalStorage)
- ✅ Interface Responsiva - Funciona perfeitamente em desktop, tablet e mobile
- ✅ Design Moderno - Interface limpa e profissional com gradientes e animações
- 🎨 Design Moderno - Interface limpa com gradientes e sombras suaves
- 📱 100% Responsivo - Adapta-se perfeitamente a qualquer tamanho de tela
- ⚡ Animações Suaves - Transições e hover effects profissionais
- 🎯 Cores por Categoria - Cada categoria tem sua cor e ícone único
- 🔍 Busca em Tempo Real - Resultados instantâneos enquanto você digita
- 📊 Cards de Resumo - Visualização rápida de estatísticas importantes
- 🔐 100% Local - Todos os dados ficam no seu navegador
- 🚫 Sem Backend - Nenhum dado é enviado para servidores externos
- 💾 Backup Automático - Dados salvos automaticamente no LocalStorage
- 🔒 Privacidade Total - Você tem controle completo sobre suas informações
- Formulário intuitivo para adicionar/editar despesas
- Cards de resumo com total, quantidade e média
- Filtros visuais por categoria
- Lista organizada de despesas com ações rápidas
🍔 Alimentação | 🚗 Transporte | 🏠 Moradia | 🛒 Compras | 💊 Saúde | 🎓 Educação | 🎮 Entretenimento | 💼 Trabalho | 🏋️ Esportes |
- React 17.0.2 - Biblioteca JavaScript para construção de interfaces
- TypeScript 4.4.3 - Superset do JavaScript com tipagem estática
- CSS3 - Estilização moderna com Flexbox e Grid
- LocalStorage API - Persistência de dados no navegador
- React Hooks - useState, useEffect para gerenciamento de estado
- Node.js 14.0 ou superior
- npm ou yarn
- Clone o repositório:
git clone https://github.com/christianresende/expense-tracker.git
cd expense-tracker- Instale as dependências:
npm installou
yarn install- Execute o servidor de desenvolvimento:
npm startA aplicação estará disponível em: http://localhost:3000
- Preencha o formulário com:
- Descrição: Nome ou descrição da despesa (ex: "Almoço no restaurante")
- Valor: Valor gasto em reais (ex: 45.50)
- Categoria: Selecione uma das 11 categorias disponíveis
- Data: Data da despesa
- Clique em "Adicionar Despesa"
- A despesa será adicionada à lista e salva automaticamente
- Clique no botão ✏️ (editar) na despesa desejada
- O formulário será preenchido com os dados da despesa
- Modifique os campos desejados
- Clique em "Salvar Alterações" ou "Cancelar"
- Clique no botão 🗑️ (excluir) na despesa desejada
- Confirme a exclusão na caixa de diálogo
- A despesa será removida permanentemente
- Use os botões de categoria acima da lista
- Clique em uma categoria para filtrar
- Clique em "Todas" para remover o filtro
- Digite no campo de busca
- Os resultados são filtrados em tempo real
- A busca funciona por descrição e categoria
expense-tracker/
├── public/ # Arquivos públicos estáticos
├── src/
│ ├── components/ # Componentes React
│ │ ├── ExpenseForm/ # Formulário de despesas
│ │ ├── ExpenseItem/ # Item individual de despesa
│ │ ├── CategoryFilter/ # Filtro por categoria
│ │ ├── SearchBar/ # Barra de busca
│ │ └── ExpenseSummary/ # Resumo de despesas
│ ├── types/ # Definições de tipos TypeScript
│ │ └── Expense.ts # Tipo Expense e categorias
│ ├── utils/ # Funções utilitárias
│ │ ├── storage.ts # Gerenciamento de LocalStorage
│ │ └── helpers.ts # Funções de formatação e filtros
│ ├── App.tsx # Componente principal
│ ├── App.css # Estilos globais
│ └── index.tsx # Ponto de entrada
├── package.json # Dependências e scripts
└── README.md # Este arquivo
- Adicionar: Formulário completo com validação
- Editar: Edição inline com formulário pré-preenchido
- Excluir: Exclusão com confirmação de segurança
- Visualizar: Lista organizada por data (mais recente primeiro)
- 11 categorias pré-definidas com ícones e cores únicas
- Filtro visual por categoria
- Identificação visual rápida por cor
- Busca em tempo real por descrição
- Filtro por categoria
- Combinação de busca e filtro
- Resultados instantâneos
- Total: Soma de todas as despesas filtradas
- Quantidade: Número de despesas
- Média: Valor médio por despesa
- Atualização automática conforme filtros
- Salvamento automático no LocalStorage
- Carregamento automático ao iniciar
- Dados persistem entre sessões
- Sem necessidade de backend
Executa a aplicação em modo de desenvolvimento. Abra http://localhost:3000 para visualizar no navegador.
Executa os testes em modo interativo.
Cria uma versão otimizada para produção na pasta build.
npm run build- Instale a CLI da Vercel:
npm i -g vercel- Faça o deploy:
vercel- Faça o build do projeto:
npm run build- Arraste a pasta
buildpara o Netlify Drop
- Instale o gh-pages:
npm install --save-dev gh-pages- Adicione ao
package.json:
{
"homepage": "https://christianresende.github.io/expense-tracker",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
}- Faça o deploy:
npm run deploytype Expense = {
id: string; // Identificador único
description: string; // Descrição da despesa
amount: number; // Valor da despesa
category: string; // Categoria
date: string; // Data (ISO string)
createdAt: string; // Data de criação (ISO string)
}Cada categoria possui:
- ID: Identificador único
- Nome: Nome da categoria
- Ícone: Emoji representativo
- Cor: Cor hexadecimal única
Edite src/types/Expense.ts para adicionar ou modificar categorias:
export const CATEGORIES: ExpenseCategory[] = [
{ id: 'nova-categoria', name: 'Nova Categoria', icon: '🎯', color: '#FF5733' },
// ... outras categorias
];Os estilos estão organizados por componente:
src/App.css- Estilos globaissrc/components/*/**.css- Estilos específicos de cada componente
- Gráficos e visualizações (Chart.js ou Recharts)
- Filtros por período (mês, semana, ano)
- Exportação de dados (CSV, PDF)
- Modo escuro/claro
- Orçamentos e metas
- Notificações e lembretes
- Múltiplas moedas
- Sincronização com backend (opcional)
- App mobile (React Native)
Este projeto é de código aberto e está disponível para uso livre sob a licença MIT.
Christian Resende
- 🌐 GitHub: @christianresende
- 💼 LinkedIn: Christian Resende
- React Team - Pela excelente documentação e ferramentas
- TypeScript Team - Pela linguagem e tipagem estática
- Comunidade open source pelo suporte contínuo
Contribuições são bem-vindas! Sinta-se à vontade para:
- ⭐ Dar uma estrela no repositório
- 🍴 Fazer um fork do projeto
- 🌿 Criar uma branch para sua feature (
git checkout -b feature/AmazingFeature) - 💾 Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - 📤 Push para a branch (
git push origin feature/AmazingFeature) - 🔄 Abrir um Pull Request
Encontrou um bug ou tem uma sugestão?
⭐ Se este projeto foi útil para você, considere dar uma estrela no repositório!
Feito com ❤️ usando React e TypeScript