🌟 planej.ai — Educador Financeiro Inteligente

O planej.ai é uma aplicação web de educação financeira pessoal e inteligência artificial que ajuda usuários a planejarem e realizarem suas metas financeiras de forma clara, didática e acessível.

---

🎯 O Que o Projeto Faz

A aplicação guia o usuário através de um formulário interativo de 6 etapas para coletar o seu perfil financeiro (renda mensal bruta, custos fixos e dívidas) e a sua meta pessoal (nome do objetivo, custo total e prazo em meses).

Com base nos dados inseridos, o app:

1. Calcula a capacidade mensal de economia em relação ao custo e prazo do objetivo.
2. Chama a API do Google Gemini para estruturar um diagnóstico detalhado.
3. Retorna conselhos personalizados divididos em viabilidade da meta, saúde orçamentária, ideias de renda extra e recomendações de investimentos.
4. Fornece uma Página de Histórico para gerenciar (listar, ver detalhes e excluir) simulações passadas cadastradas no navegador.
5. Disponibiliza um Chat Interativo direto no painel de resultados para conversar e tirar dúvidas contínuas com o educador financeiro inteligente.

---

🛠️ Tecnologias Utilizadas

• React 18 & TypeScript — Estrutura de componentes robusta e tipagem estática.
• Vite 8 — Bundler ultrarápido com suporte a Fast Refresh.
• Tailwind CSS v4 — Framework de estilização de última geração para design responsivo e dinâmico.
• React Router DOM v6 — Roteamento em Single Page Application (SPA) para as páginas raiz (/), resultados (/resultado/:id) e histórico (/historico).
• API do Google Gemini (Modelo gemini-flash-latest) — IA Generativa de baixa latência para fornecer os diagnósticos inteligentes.
• React Loading Skeleton — Animações fluídas de carregamento durante as requisições de inteligência artificial.
• Lucide React — Pacote de ícones minimalistas e modernos.

---

⚡ Como Executar a Aplicação

Pré-requisitos

Certifique-se de ter o Node.js (versão 18 ou superior) instalado em sua máquina.

Passo a Passo

1. Clonar o repositório:

   git clone https://github.com/CarvalhoNathan/planejai.git
   cd planejai

2. Instalar as dependências:

   npm install

3. Configurar a chave de API do Gemini: Crie um arquivo chamado .env.local na raiz do projeto e adicione a sua chave de API gerada no Google AI Studio:

   VITE_GEMINI_API_KEY=sua_chave_de_api_aqui

4. Iniciar o servidor de desenvolvimento:

   npm run dev

5. Acessar o app: Abra o seu navegador e acesse: http://localhost:5173

---

✨ Melhorias Implementadas (Desafios do Bootcamp)

📌 Desafio 1 — Histórico de Simulações

• Criação da rota /historico para centralizar planejamentos anteriores.
• Desenvolvimento do hook customizado useSimulationStorage para gerenciar o CRUD completo no localStorage.
• Layout de cards responsivos com exibição de resumos financeiros e ações de "Ver detalhes" (reaproveitando insights em cache) e exclusão direta com atualização reativa na interface.

📌 Desafio 2 — Chat com o Educador Financeiro (IA)

• Integração de um Chatbot conversacional no rodapé do painel de diagnóstico da IA.
• Persistência da conversa no local storage sob a chave de cada simulação.
• Envio do histórico cronológico de mensagens (role: "user" | "model") junto com a instrução de sistema (systemInstruction) para manter a IA com memória do contexto financeiro do usuário.
• Efeitos de Auto-Scroll inteligente para focar na resposta gerada e animações de carregamento do assistente digitando.

---

🧪 Como Testar o Fluxo Principal

1. Na página inicial, responda às 6 perguntas (Renda, Custos, Dívidas, Objetivo, Custo da Meta e Prazo) utilizando a máscara monetária de digitação inteligente.
2. Clique em Gerar simulação para criar o registro.
3. Você será redirecionado para a página /resultado/:id. Aguarde o carregamento sutil com esqueleto pulsante enquanto a IA processa o seu prompt.
4. Veja as métricas nos cartões superiores e leia o relatório visual estruturado com o indicador de viabilidade.
5. Escreva uma mensagem no chat (ex: "Como consigo economizar mais R$ 200 por mês?") e confira a IA respondendo no contexto exato dos seus dados financeiros.
6. Clique no botão de troca de tema no cabeçalho global para verificar a adaptação visual fluída entre os temas Claro e Escuro.
7. Clique no menu Histórico para confirmar que o seu planejamento está listado, clique em "Ver detalhes" e teste o botão de exclusão.

---

🧠 O Que Aprendi Durante o Desafio

• Manipulação Inteligente de JSON com IA: Como usar a engenharia de prompt para forçar LLMs a retornarem payloads em estruturas JSON estritas sem lixo textual, facilitando o parse direto no React.
• Gerenciamento de Estado e Ciclo de Vida do React: Otimização de hooks (useCallback, useEffect e useRef) para evitar múltiplos disparos e loops infinitos de requisições de rede para a API de IA.
• Novidades do Tailwind CSS v4: Configuração avançada de seletores customizados de tema escuro (@variant dark) para fazer o design system trabalhar perfeitamente em sincronia com o estado local do React.
• UX com Carregamentos Assíncronos: O uso de esqueleto de carregamento (Skeletons) melhora drasticamente a percepção de tempo de resposta do usuário em sistemas que interagem com APIs externas.