O Desafio Técnico
A Onda Finance nasceu como um desafio técnico de avaliação simulada — o tipo de projeto que empresas fintech pedem em processos seletivos. O objetivo era criar algo que demonstrasse domínio de problemas reais do setor: confiança visual, clareza de dados financeiros complexos, e segurança percebida.
Diferente de outros projetos pessoais, este foi construído com o mindset de "como um tech lead avaliaria este código?" — com tipagem rigorosa, componentes reutilizáveis, separação de responsabilidades clara e deploy com HTTPS obrigatório.
O Principal Desafio de Fintech
O Problema
Interfaces financeiras com dados inconsistentes, valores que "piscam" durante loading, ou hierarquia visual confusa destroem instantaneamente a confiança do usuário. Em fintech, confiança visual não é diferencial — é pré-requisito.
A Abordagem
Implementei skeleton loading states para todos os dados financeiros (saldo, transações, cripto), garantindo que o layout nunca sofra "layout shift" durante loading. Cada valor monetário tem formatação consistente via Intl.NumberFormat — nenhum número "cru" aparece na interface.
Frontend
- • Next.js App Router
- • TypeScript
- • CSS (custom)
- • Lucide React
Crypto
- • Carteira BTC/ETH
- • Mock price feed
- • Portfolio tracking
- • DeFi integration sim
Pagamentos
- • Transferências PIX
- • Pagamentos globais
- • Histórico filtrado
- • Status em tempo real
Segurança
- • HTTPS (Vercel TLS)
- • CSP headers
- • Dados mascarados
- • Session handling
// Formatação consistente — nunca número "cru" na UI
export function formatCurrency(
value: number,
currency: string = 'BRL',
locale: string = 'pt-BR'
): string {
return new Intl.NumberFormat(locale, {
style: 'currency',
currency,
minimumFractionDigits: 2,
}).format(value);
}
// Uso: formatCurrency(1250.5) → "R$ 1.250,50"
// Uso: formatCurrency(500, 'USD', 'en-US') → "$500.00"DeFi sem Alienar Usuários
O maior desafio de UX foi apresentar conceitos de DeFi (yield farming, liquidity pools, staking) de forma que um usuário de banco digital comum entendesse. O jargão técnico de cripto afasta a maioria dos usuários — mas simplificar demais tira a credibilidade técnica da plataforma.
Progressive Disclosure
Apliquei o padrão de progressive disclosure — a interface mostra termos familiares ("rendimento", "reserva") com acesso opcional ao termo técnico DeFi para usuários avançados. Tooltips contextual explicam cada conceito sem poluir a UI principal. Dois públicos, uma interface.
Aprendizados
Em fintech, a percepção de segurança é tão importante quanto a segurança real. Cada detalhe visual comunica confiabilidade ou a falta dela.
TypeScript strict com tipos explícitos para cada entidade financeira (Transaction, Wallet, Asset) prevenou uma classe inteira de bugs que seriam críticos em produção real.
Skeleton screens são obrigatórios em qualquer interface financeira. A ausência deles, com dados "piscando", é suficiente para o usuário abandonar o produto.