Do conceito à aplicação real: construindo o Planej.ai com React, TypeScript e IA Generativa

Do conceito à aplicação real: construindo o Planej.ai com React, TypeScript e IA Generativa

Desenvolver software vai muito além de decorar sintaxe: trata-se de traduzir necessidades humanas em ferramentas práticas, acessíveis e inteligentes. Concluir o projeto do Planej.ai na DIO foi um exercício completo de integração entre experiência do usuário, engenharia de front-end e inteligência artificial generativa.

A aplicação foi pensada como um educador financeiro pessoal que funciona inteiramente no navegador — sem necessidade de backend complexo —, processando dados de orçamento e metas para gerar diagnósticos, sugestões práticas e planos de ação em tempo real.

O que foi construído na prática:

• Arquitetura Moderna com React 19 e Vite: Estrutura escalável em TypeScript, garantindo tipagem forte de ponta a ponta e build ultrarrápido.
• 
  
• Formulário Multi-Step Interativo: Coleta de dados guiada com máscaras monetárias dinâmicas, validações em tempo real e barra de progresso visual para não sobrecarregar o usuário.
• 
  
• Sistema de Temas e Persistência: Implementação de Dark/Light mode com Context API e Tailwind CSS v4, salvando preferências e o histórico de simulações diretamente no localStorage.
• 
  
• Integração Real com a API do Google Gemini: Criação de prompts estruturados com schemas JSON estritos para alimentar o modelo, além de controle técnico com useRef para evitar requisições duplicadas e tratamento de estados visuais com skeletons e feedbacks de erro.
• 
  

Mais do que apenas código, esse projeto consolida a importância de unir visão de produto com execução técnica assertiva: criar soluções que realmente geram clareza e valor para quem está do outro lado da tela.

🔗 Repositório do projeto no GitHub: github.com/25011987/planej-ai

Bora para o próximo desafio! 🚀