[PITCH] FinançasAI: meu primeiro app financeiro em produção

Olá, comunidade!

Meu nome é João Francisco de Oliveira e estou em transição para a área de tecnologia, estudando desenvolvimento web com foco em JavaScript, React, TypeScript, GitHub e Supabase.

Nos últimos meses, venho desenvolvendo o FinançasAI, meu primeiro projeto desse porte funcionando em produção.

Agora cheguei a uma etapa importante: preciso que pessoas que não participaram do desenvolvimento testem o aplicativo e compartilhem uma opinião sincera.

Qual problema tentei resolver?

Muitas pessoas têm dificuldade para acompanhar receitas, despesas, metas e relatórios financeiros porque algumas ferramentas são complicadas ou exigem muitos passos.

A proposta do FinançasAI é oferecer uma experiência mais simples, visual e conversacional.

O usuário pode registrar movimentações manualmente ou escrever frases como:

Lançar gasto hoje de R$ 60 em pizza.

O aplicativo interpreta as informações e registra a transação.

Também implementei suporte a voz, permitindo ditar uma movimentação financeira.

Principais funcionalidades

O FinançasAI possui atualmente:

• Dashboard com resumo financeiro;
• cadastro, edição e exclusão de receitas e despesas;
• organização das transações por categorias;
• criação e acompanhamento de metas financeiras;
• relatórios por diferentes períodos;
• comparação entre receitas, despesas e saldo;
• exportação de relatórios;
• Chat financeiro por texto;
• registro de movimentações por voz;
• diferentes espaços financeiros;
• interface adaptada para computador e celular;
• autenticação e proteção dos dados de cada usuário.

Tecnologias utilizadas

O projeto foi desenvolvido com:

• React;
• TypeScript;
• Vite;
• Supabase;
• Tailwind CSS;
• shadcn/ui;
• TanStack Query;
• Recharts;
• Vercel;
• Sentry.

Um dos maiores desafios: separar os espaços financeiros

O aplicativo permite que o usuário tenha diferentes espaços financeiros, como:

• finanças pessoais;
• finanças familiares;
• projetos;
• outros contextos separados.

Durante o desenvolvimento, percebi que não bastava apenas trocar visualmente de espaço. Era necessário garantir que cada transação, meta, categoria, mensagem e relatório permanecesse vinculado ao espaço correto.

Por isso, o projeto passou a usar financial_space_id nas entidades financeiras e nas operações relacionadas.

Também revisei:

• filtros das consultas;
• inserts no banco;
• bloqueios de envio;
• fixtures de testes;
• tipos do TypeScript;
• políticas de segurança.

Essa etapa me ensinou que isolamento de dados não deve depender apenas da interface. Ele precisa existir nos tipos, nas consultas e nas regras do banco.

Outro desafio: voz e troca de espaço

O Chat permite registrar uma transação por reconhecimento de voz.

Encontrei um cenário delicado: o usuário poderia começar uma gravação em um espaço financeiro e trocar de espaço antes do autoenvio.

Para evitar que uma mensagem fosse enviada no lugar errado, vinculei cada sessão de voz:

• ao espaço onde a gravação começou;
• a um identificador próprio de sessão;
• ao conteúdo capturado;
• a um timeout controlado.

Antes do envio, o aplicativo verifica novamente se:

• a sessão ainda é a mesma;
• o espaço original continua ativo;
• não existe outro envio naquele espaço;
• o conteúdo ainda pertence à gravação correta.

Uma nova gravação, um cancelamento, um erro ou a desmontagem do componente invalidam o envio anterior.

Esse fluxo foi posteriormente testado em produção: ao gravar uma mensagem, trocar de espaço e voltar, a movimentação permaneceu no espaço correto.

Segurança e validação

O projeto utiliza Supabase para autenticação e banco de dados.

Também trabalhei com políticas de Row-Level Security para impedir acesso inadequado aos dados.

Uma migration recente adicionou proteção a um bucket reservado para exportação do banco. A migration:

• verifica se o RLS está habilitado;
• valida se já existe uma policy com o mesmo nome;
• rejeita uma policy divergente;
• não altera automaticamente políticas existentes;
• preserva o acesso de processos server-side autorizados.

Antes da publicação, as alterações passaram por revisão e validação.

Resultados da última rodada:

• TypeScript aprovado;
• lint aprovado;
• 398 testes automatizados aprovados;
• build de produção aprovado;
• deploy concluído com sucesso;
• teste manual do fluxo de voz aprovado.

Monitoramento em produção

O aplicativo utiliza Sentry para acompanhar erros.

Recentemente, foi registrado um erro de carregamento de um arquivo JavaScript pertencente a uma versão antiga do aplicativo. O evento não voltou a ocorrer na versão atual e foi mantido em observação antes de ser resolvido.

Esse acompanhamento tem me ajudado a entender a diferença entre um erro real da versão atual e situações causadas por cache de builds antigos.

O que aprendi com o projeto

Alguns dos principais aprendizados foram:

1. Um build aprovado não substitui testes reais de uso.
2. Interfaces TypeScript mais rígidas ajudam a encontrar objetos incompletos.
3. Segurança precisa existir no frontend e no banco.
4. Operações assíncronas podem criar problemas difíceis de perceber.
5. Trocar de contexto durante uma operação exige validação adicional.
6. Monitoramento em produção é essencial.
7. Às vezes, a melhor decisão é não alterar o código sem evidência de um problema.

O projeto está em beta

Neste momento, sou a única pessoa que vem testando o aplicativo regularmente.

Por isso, gostaria de receber feedback de pessoas interessadas em finanças pessoais ou desenvolvimento web.

Durante o teste, gostaria de saber:

• O cadastro foi simples?
• O Dashboard ficou fácil de entender?
• Foi possível registrar uma receita ou despesa?
• O Chat financeiro foi intuitivo?
• As metas e os relatórios pareceram úteis?
• Alguma tela ou mensagem ficou confusa?
• O aplicativo apresentou algum erro?
• Qual função você melhoraria primeiro?

Teste o FinançasAI

Aplicativo:

https://chat-financas-ease.vercel.app

Aviso importante

O aplicativo ainda está em fase beta.

Para testar, utilize apenas informações fictícias.

Não informe:

• senhas bancárias;
• números de cartões;
• dados de contas bancárias;
• documentos pessoais;
• informações financeiras confidenciais.

O FinançasAI não substitui orientação financeira profissional.

Todo comentário será muito bem-vindo, inclusive críticas, dificuldades, sugestões ou pequenos detalhes que poderiam ser melhorados.

Obrigado por conhecer o projeto e contribuir com a minha evolução como desenvolvedor!