Pular para o conteúdo
Anderson Rocha

projetos / Fluxos centrais do MVP entregues

WIMM

Where is my money?

Finanças pessoais no desktop e no mobile — uma API NestJS, um design system compartilhado e categorização de transações assistida por IA.

WIMM — screenshot da interface

Visão geral

WIMM é uma plataforma de finanças pessoais que funciona no desktop e no mobile a partir de um único backend. Uma API NestJS concentra toda a regra de negócio; um cliente desktop em Electron + React 19 e um cliente mobile em Expo + React Native a consomem por meio de contratos compartilhados e independentes de framework. Extratos bancários entram por CSV e OFX, são deduplicados e categorizados — por um motor de regras e pelo Claude — e alimentam relatórios, recorrências e planos de parcelamento.

O produto existe porque acompanhar dinheiro em uma vida financeira brasileira significa lidar com coisas que muitos apps ignoram: parcelamentos, formatos mistos de extrato e uso bilíngue — internacionalização em português e inglês desde o início. O desenvolvimento começou em abril de 2026 e segue ativo. Os fluxos centrais do MVP já foram entregues — autenticação, importações, categorização, recorrências, relatórios e empacotamento desktop — enquanto o repositório permanece privado durante a maturação do produto.

Demonstração ao vivo

Navegação contínua pelo produto nativo

build nativa para iOS

Uma sessão contínua no iOS: troca o período e a visualização do dashboard, inspeciona filtros de transações, abre o fluxo de importação e retorna para a visão anual por categoria.

Arquitetura

O monorepo usa pnpm workspaces + Turborepo: três apps e um pacote compartilhado. As regras de contribuição estão registradas e são aplicadas: o backend concentra a lógica, os clientes permanecem enxutos e abstrações só aparecem na segunda duplicação.

  • apps/api — NestJS + Prisma + PostgreSQL; JWT com refresh tokens, rate limiting com ThrottlerGuard, DTOs com class-validator e estratégias Passport
  • apps/desktop — Electron + React 19 + Vite; React Query, Radix UI, i18next e empacotamento electron-builder
  • apps/mobile — Expo + React Native; React Navigation 7, NativeWind v4, gráficos Victory Native XL em Skia e armazenamento de tokens com expo-secure-store
  • packages/shared — DTOs e contratos de API independentes de framework

O pipeline de importação é o centro técnico: parse → normalização → deduplicação (hash de fingerprint) → categorização → prévia → confirmação. A categorização combina um motor de regras — padrões de sistema e do usuário — com categorização por IA pelo Anthropic Claude SDK. Um motor de recorrências materializa transações até uma data-alvo, e o modelo trata InstallmentPlan, Recurrence, CategorizationRule e ImportBatch como entidades de primeira classe, não como flags em Transaction.

A autenticação é onde o desenho dos clientes se prova. O interceptor axios do desktop implementa refresh single-flight: 401s concorrentes entram em fila atrás de uma única chamada de refresh, em vez de sobrecarregar a API. O mesmo fluxo foi portado 1:1 para o mobile. O design system funciona da mesma forma: tokens CSS no renderer desktop são espelhados por tokens NativeWind v4 no mobile (bg-surface-1, text-fg-muted), um vocabulário para as duas plataformas.

Capturas

Capturas do MVP entregue — clientes mobile e desktop sobre o mesmo sistema de tokens.

Interface mobile do WIMM 1
Interface mobile do WIMM 2
Interface mobile do WIMM 3
Dashboard desktop do WIMM com resumo financeiro anual, compromissos futuros, gráfico de desempenho e distribuição por categoria
Painéis inferiores do dashboard com atividade recente, categorias de gasto e gráfico de saldo acumulado
Registro de transações do WIMM com nomes de pessoas e detalhes de transferência borrados
Área de transações recorrentes do WIMM para gerar e configurar regras agendadas

Stack e decisões

EscolhaMotivo
Monorepo pnpm + TurborepoTrês apps e um pacote compartilhado no mesmo toolchain; disciplina de monorepo como regra de contribuição escrita
NestJS + Prisma + PostgreSQLO backend concentra a lógica; os dois clientes são consumidores enxutos de uma única API
Pacote de DTOs compartilhadoContratos de API independentes de framework, impedindo que desktop e mobile se afastem do backend
Tokens CSS ↔ tokens React NativeUm vocabulário para o design system em Electron e React Native
Motor de regras + Claude SDKRegras de padrão de sistema e usuário ao lado de categorização por IA no pipeline de importação
Deduplicação por hash de fingerprintTransações duplicadas são capturadas durante a importação, antes da prévia e confirmação
Interceptor de refresh single-flightEvita tempestades de refresh e condições de corrida; portado 1:1 do desktop para o mobile
electron-builderArtefatos de distribuição prontos: DMG para macOS, NSIS para Windows e AppImage para Linux

Links

O repositório é privado. O código — pipeline de importação, motor de recorrência, fluxo de autenticação e documentação de arquitetura — pode ser apresentado de ponta a ponta em uma entrevista. Entre em contato.