Article image
Demys Lima
Demys Lima31/05/2026 10:44
Compartilhe

Tutor financeiro - IA React Front-end

  • #Tailwind
  • #React
  • #Inteligência Artificial (IA)

Neste projeto pude integrar IA tanto no produto, quanto no desenvolvimento dele.

A instrutora Michele Ambrosio entregou um produto robusto e deixou dois desafios finais.

Para esses desafios utilizei o conhecimento que venho adquirindo os bootcamps de IA com o Felipão Aguiar e o time da DIO,

Criei os prompts dando os contextos das funcionalidades e tirei prints do Figma do projeto e pronto, solicitei o desenvolvimento e sai quase tudo como esperado, a IA mudou um pouco apenas o design, mas a funcionalidade ficou perfeita, precisei realizar somente alguns ajuste.

Aproveitei para sanitizar o prompt do usuário, removendo alguns caracteres para reduzir o consumo de token e criei um array de contextos válidos para chamar a IA somente se o prompt estivesse no contexto.

# Finance Tutor 💰 - Seu Mentor Financeiro com IA

O **Finance Tutor** é uma aplicação web moderna desenvolvida para ajudar os usuários a simularem cenários financeiros e receberem insights personalizados alimentados por inteligência artificial. Construído com as tecnologias mais recentes do ecossistema React, ele oferece uma experiência fluida para quem deseja planejar seu futuro financeiro.

## 🌟 O que é o Finance Tutor?

Planejar objetivos financeiros pode ser complexo. O Finance Tutor simplifica esse processo através de um for

mulário guiado que coleta dados sobre renda, despesas e metas. Com essas informações, ele utiliza a API do Google Gemini para gerar uma análise profunda e personalizada da saúde financeira do usuário.

## 🚀 Principais Funcionalidades

- **Simulação Financeira Multi-etapas**: Um formulário intuitivo que guia o usuário na inserção de renda mensal, custos fixos, dívidas e objetivos específicos.

- **Insights com IA (Gemini API)**: Integração com o modelo `gemini-flash-latest` para fornecer:

- **Análise de Viabilidade**: Avaliação em tempo real se a meta financeira é alcançável no prazo desejado.

- **Diagnóstico Financeiro**: Um detalhamento sobre a situação atual e onde estão os gargalos.

- **Sugestões Práticas**: Dicas personalizadas para otimizar economias e reduzir gastos.

- **Ideias de Investimento e Renda**: Recomendações para fazer o patrimônio crescer.

- **Histórico de Simulações**: Armazenamento local das simulações anteriores para acompanhamento de progresso.

- **Interface Moderna e Responsiva**: UI polida com suporte completo a temas claro (Light) e escuro (Dark).

- **Segurança e Robustez**: Desenvolvido inteiramente em TypeScript, garantindo maior confiabilidade no código.

## 🛠️ Tecnologias Utilizadas

- **React 19**: Biblioteca para construção de interfaces de usuário.

- **Vite 8**: Ferramental de próxima geração para um desenvolvimento ultra-rápido.

- **TypeScript**: Tipagem estática para melhor experiência de desenvolvimento.

- **Tailwind CSS 4**: Framework CSS utilitário para estilização moderna.

- **Google Gemini API**: O "cérebro" por trás do motor de insights financeiros.

- **Lucide React**: Conjunto de ícones consistentes e bonitos.

- **React Router Dom 7**: Gerenciamento de rotas declarativo.

- **Oxlint e Oxfmt**: Formatador e validador de código mais moderno atualmente.

Desenvolvido para transformar a forma como você entende e gerencia suas finanças pessoais. 🚀

Compartilhe
Comentários (0)