AN
Todos os projetos
Profissionais2026/05

unifi — União Financeira

Gestão financeira pessoal — e o laboratório de arquitetura onde as decisões são testadas antes de virar entrega paga

Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uiRechartsFeature-Sliced Design
Visão geral do mês no unifi

O desafio

Controlar as finanças de casa em planilha funciona até o dia em que você quer responder uma pergunta que a planilha não foi feita para responder: quanto sobrou de verdade neste mês, contando a fatura que ainda não fechou e a conta que vence semana que vem.

O unifi nasceu dessa pergunta — e virou, no caminho, o lugar onde eu testo decisão de arquitetura sem prazo de cliente em cima. O que dá certo aqui entra nos projetos pagos; o que não dá, morre aqui.

Resultados

Treze telas, de visão geral do mês a histórico de auditoria
Autenticação e onboarding encadeado já implementados como prova de fluxo, à espera da decisão de backend

O que eu fiz

01

Arquitetura por funcionalidade, não por tipo de arquivo

Feature-Sliced Design levado a sério: entities, features, widgets, views e shared, com a regra de dependência valendo em todas as direções. Cada domínio — transação, cartão, meta, recorrência — carrega junto o próprio modelo, o próprio repositório e a própria interface.

02

Persistência atrás de contrato

Cada entidade tem um repositório com interface própria. A implementação de hoje é localStorage; trocá-la por um banco relacional é reescrever a implementação concreta, sem tocar em regra de negócio nem em componente.

03

Importação de extrato bancário

CSV do Nubank e OFX, com categorização automática por palavra-chave e um mapa de comerciante que aprende o apelido de cada estabelecimento.

04

Design System em Storybook

Story para cada componente de UI, com tokens em OKLCH — o mesmo trabalho de base que depois virou o Design System dos sites de cliente.

Galeria

Visão geral do mês
Dashboard com gastos por categoria
Histórico de transações
Cartões e faturas
Metas financeiras
Contas recorrentes
Histórico de auditoria
Configurações
Backups automáticos e manuais
Entrada na conta
Visão geral em celular
Dashboard em celular

Decisões técnicas

Recorrência versionada por mês

Editar o valor de uma conta fixa não pode reescrever o passado: um mês já visualizado precisa continuar mostrando o valor que valia quando foi lançado. Por isso a recorrência guarda histórico de valores, exceções pontuais e adiamentos, em vez de um campo único sobrescrito a cada edição.

Backup automático via File System Access API

Dado que só existe no navegador some com uma limpeza de cache. O app pede uma pasta uma vez e passa a gravar um backup diário nela, além da exportação manual em JSON.

Por que o login ainda é de mentira

Login exige backend, e a escolha de backend ainda está em aberto. A implementação atual — sessão em localStorage, hash com Web Crypto, entrada pelo Google simulada — existe para validar o fluxo inteiro antes da decisão, e está marcada como provisória na própria documentação.

É o projeto sem prazo, e é justamente por isso que ele é o mais bem arquitetado da carteira. Cada decisão aqui pôde ser tomada olhando dois anos à frente em vez de duas semanas.