Seu planejamento financeiro, mais claro e inteligente.
Uma aplicação web de planejamento financeiro que combina simulação, análise de cenários e Inteligência Artificial em uma experiência simples e visual.
A pessoa usuária informa sua renda, gastos, dívidas e uma meta financeira. A aplicação calcula sua capacidade mensal, apresenta uma análise do cenário e utiliza o Google Gemini para gerar insights personalizados.
O projeto está disponível para teste diretamente pelo navegador.
Também é possível clonar o repositório e executar a aplicação localmente seguindo as instruções abaixo.
O Planeja.ai foi desenvolvido a partir de um desafio da Digital Innovation One (DIO), com foco na construção de uma aplicação Front-End utilizando React, TypeScript e Inteligência Artificial Generativa.
Durante o desenvolvimento, foram implementadas funcionalidades adicionais e melhorias de arquitetura, experiência do usuário e segurança.
A pessoa usuária informa:
- Renda mensal
- Custos fixos
- Dívidas e parcelas
- Nome da meta
- Valor da meta
- Prazo desejado
A aplicação utiliza esses dados para calcular a capacidade financeira mensal e o valor necessário para alcançar a meta dentro do prazo informado.
O Google Gemini analisa os dados da simulação e gera um diagnóstico personalizado com:
- Viabilidade da meta
- Diagnóstico financeiro
- Sugestões práticas
- Possibilidades de renda extra
- Sugestões de investimento
- Mensagem motivacional
A integração também conta com loading, tratamento de erros, validação da resposta e controle de chamadas duplicadas.
A comunicação com o Gemini utiliza uma Serverless Function da Vercel.
A chave da API não é exposta no código executado pelo navegador.
┌──────────────────────┐
│ Planeja.ai │
│ Front-End │
└──────────┬───────────┘
│
│ POST /api/insight
▼
┌──────────────────────┐
│ Vercel Serverless │
│ Function │
└──────────┬───────────┘
│
│ GEMINI_API_KEY
▼
┌──────────────────────┐
│ Google Gemini │
└──────────────────────┘
A variável GEMINI_API_KEY fica armazenada no ambiente do servidor.
As simulações podem ser consultadas posteriormente.
É possível:
- Visualizar simulações anteriores
- Acessar seus resultados
- Consultar os insights novamente
- Excluir registros
O histórico utiliza localStorage para persistência no navegador.
A página de resultados apresenta:
- Percentual da renda comprometida
- Capacidade financeira mensal
- Valor necessário para alcançar a meta
- Comparação entre a capacidade atual e o valor necessário
Um slider permite alterar o prazo da meta e visualizar como a mudança interfere no valor necessário para economizar mensalmente.
A funcionalidade permite comparar diferentes cenários sem precisar iniciar uma nova simulação.
A aplicação possui suporte para:
- ☀️ Tema claro
- 🌙 Tema escuro
Preenchimento dos dados
│
▼
Simulação
│
▼
Cálculos financeiros
│
▼
/api/insight
│
▼
Google Gemini
│
▼
Resultados
/ \
▼ ▼
Histórico Simulador
- React
- TypeScript
- Vite
- Tailwind CSS
- React Router
- Radix UI
- Lucide React
- React Loading Skeleton
- Google Gemini API
- Vercel Serverless Functions
- LocalStorage
- React Hooks
- ESLint
- TypeScript
- Prettier
planeja-ai/
├── api/
│ └── insight.ts
│
├── src/
│ ├── components/
│ │ ├── features/
│ │ │ ├── Insights/
│ │ │ ├── Simulation/
│ │ │ └── SimulationResults/
│ │ └── shared/
│ │
│ ├── data/
│ │ ├── aiPrompt.ts
│ │ └── simulation.ts
│ │
│ ├── hooks/
│ │ ├── useInsight.tsx
│ │ └── useSimulationStorage.tsx
│ │
│ ├── pages/
│ │ ├── HomePage.tsx
│ │ ├── SimulationPage.tsx
│ │ ├── SimulationResultsPage.tsx
│ │ └── HistoryPage.tsx
│ │
│ ├── services/
│ │ └── aiService.ts
│ │
│ ├── utils/
│ │ ├── currency.ts
│ │ └── simulation.ts
│ │
│ └── App.tsx
│
├── .env.local
├── package.json
└── vite.config.ts
- Node.js
- npm
- Chave de API do Google Gemini
- Vercel CLI
git clone https://github.com/danieli-dutra/planeja-ai.git
cd planeja-ainpm installCrie um arquivo .env.local na raiz do projeto:
GEMINI_API_KEY=sua_chave_aquiNão versione arquivos .env ou .env.local.
Como o projeto utiliza uma Serverless Function para a integração com o Gemini, execute:
vercel devO Vercel CLI informará o endereço local disponível.
Durante o desenvolvimento, o projeto foi validado com:
npm run lintnpm run buildTambém foi realizado um teste direto do endpoint /api/insight para verificar a comunicação entre a aplicação, a Serverless Function e o Gemini.
O build foi concluído com sucesso e o código passou pela validação do ESLint.
- Componentização
- Props tipadas
- Hooks
- Gerenciamento de estado
- Composição de componentes
- Organização de responsabilidades
- Construção de prompts estruturados
- Consumo de APIs
- Parsing de JSON
- Tratamento de respostas inválidas
- Estados de loading
- Tratamento de erros
- Controle de chamadas duplicadas
A implementação da Serverless Function trouxe uma experiência prática sobre o cuidado necessário ao trabalhar com credenciais de APIs externas.
A chave do Gemini deixou de ser utilizada diretamente no Front-End e passou a ser acessada pelo ambiente da função.
O histórico permitiu trabalhar com:
localStorage- Identificação das simulações
- Recuperação de dados
- Atualização de registros
- Exclusão de registros
O desenvolvimento também envolveu decisões relacionadas a:
- Hierarquia de informações
- Feedback visual
- Estados de carregamento
- Tratamento de erros
- Navegação
- Simulação interativa
- Tema claro e escuro
- 📊 Gráficos de evolução financeira
- 💬 Conversa contínua com o Educador Financeiro
- 📚 Histórico de perguntas e respostas
- 📤 Exportação de relatórios
- 🎯 Acompanhamento da evolução das metas
- 🔔 Lembretes e notificações
- 🔐 Autenticação de usuários
- ☁️ Persistência em banco de dados
- 📱 Aprimoramentos para dispositivos móveis
Danieli Dutra
Estudante de Análise e Desenvolvimento de Sistemas, com foco em Desenvolvimento Full Stack, UX/UI e Inteligência Artificial aplicada a produtos digitais.