Desafio front-end bancário em português para praticar interfaces reais de produto, inspirado em Nubank, Itaú, Inter, C6 Bank, PicPay e Mercado Pago.
O Banking Frontend Challenge BR é um desafio técnico de front-end criado para desenvolvedores brasileiros que querem construir um projeto de portfólio sólido e próximo de um produto real.
A proposta vai além de uma tela bonita: você vai simular fluxos completos de um app bancário/fintech, lidando com estados reais de interface, acessibilidade, responsividade e componentização.
- Devs front-end iniciantes que querem um projeto forte no portfólio
- Pessoas estudando para vagas em bancos, fintechs e squads de produto
- Quem quer praticar interfaces inspiradas em Nubank, Itaú, Inter e C6
- Quem deseja evoluir em UX, UI e estruturação de aplicações reais
| Tela | Descrição |
|---|---|
| Login | CPF/e-mail, senha, feedback de erro, loading |
| Dashboard | Saldo, atalhos, resumo do cartão, últimas transações |
| Extrato | Listagem, filtros por período, busca, agrupamento |
| Comprovante | Dados da transação, status, compartilhar/baixar |
| Pix | Fluxo completo: chave → valor → revisão → confirmação → sucesso/erro |
- Tela de login com validação e estado de carregamento
- Dashboard com saldo (mostrar/ocultar), atalhos e últimas transações
- Extrato com filtro por período e busca por texto
- Comprovante com todos os dados da transação
- Fluxo Pix completo (mínimo 3 etapas)
- Estados de loading, erro e vazio em pelo menos 2 telas
- Responsividade: mobile, tablet e desktop
- Dados mockados em JSON
- Animações e microinterações
- Tema escuro/claro
- Skeleton loading
- Open Finance (bancos conectados)
- Acessibilidade completa (WCAG AA)
- Teclado numérico fake no Pix
- PWA básico
- Internacionalização (pt-BR / en)
- Hierarquia visual
- Consistência entre componentes
- Qualidade visual geral
- Atenção aos detalhes
- Clareza de navegação
- Feedback visual
- Usabilidade
- Fluidez da interface
- Componentização
- Organização de pastas
- Legibilidade e reaproveitamento
- Boas práticas
- Mobile-first
- Adaptação coerente para tablet e desktop (não apenas redimensionamento)
- Navegação por teclado
- Foco visível
- Contraste adequado
- Semântica HTML
- Labels e atributos ARIA
- Loading states
- Empty states
- Error states
- Success states
- Validações de formulário
src/
components/ # componentes reutilizáveis
pages/ # telas da aplicação
layouts/ # estruturas de layout
services/ # chamadas e lógica de dados
mocks/ # dados fake em JSON
assets/ # imagens, ícones, fontes
styles/ # estilos globais e tokens
utils/ # funções auxiliares
mocks/
user.json
accounts.json
transactions.json
receipts.json
pix-contacts.json
connected-banks.json
A escolha da stack é livre. Algumas sugestões:
Frameworks:
- React + Next.js
- Vue + Nuxt
- Angular
- Vite + React
- HTML, CSS e JavaScript puro
Extras válidos:
- TypeScript
- Tailwind CSS / Sass
- Zustand / Pinia / Context API
- shadcn/ui
- Framer Motion / VueUse
O Figma funciona como guia de estrutura e fluxo, não como cópia obrigatória.
Soluções autorais são bem-vindas, desde que respeitem os fluxos principais e a proposta bancária do desafio.
Tamanhos de frame utilizados:
- Mobile:
390 × 844 - Tablet:
768 × 1024 - Desktop:
1440 × 1024
O projeto deve ser desenvolvido com abordagem mobile-first, mas precisa funcionar bem em todas as telas.
A versão desktop não deve ser apenas uma ampliação do mobile — deve ser uma adaptação coerente ao espaço disponível:
| Dispositivo | Adaptação esperada |
|---|---|
| Mobile | Navegação inferior, blocos empilhados |
| Tablet | Grid mais espaçado, filtros laterais ou em linha |
| Desktop | Sidebar fixa, áreas paralelas, melhor aproveitamento de espaço |
Projetos que se destacam normalmente apresentam:
- ✅ Boa componentização e reaproveitamento de código
- ✅ Consistência visual entre todas as telas
- ✅ Estados completos (loading, erro, vazio, sucesso)
- ✅ Responsividade real, não apenas redimensionamento
- ✅ Atenção genuína à acessibilidade
- ✅ README bem feito com prints ou GIFs
- ✅ Deploy funcionando
- Suba o código no GitHub com README organizado
- Adicione prints ou GIFs das principais telas
- Faça o deploy em Vercel, Netlify ou similar
- Adicione o link do repositório nos tópicos do GitHub
Esse desafio demonstra que você sabe:
- Construir interfaces complexas com múltiplos estados
- Pensar em produto, não só em visual
- Lidar com fluxos reais de uma aplicação financeira
- Trabalhar acessibilidade de forma prática
- Organizar código front-end de forma escalável
- Criar experiências próximas do que o mercado espera
Este projeto é um desafio educacional e conceitual. Não possui vínculo oficial com Itaú, Nubank, Inter, C6 Bank, PicPay, Mercado Pago ou qualquer outra instituição financeira.
Recomendamos fortemente que você crie sua própria marca: invente um nome de banco, crie um logo, defina uma paleta de cores e construa uma identidade visual autoral. Esse desafio não é só sobre código — é sobre pensar como um engenheiro de software que entende de produto. Quem vai além do técnico e demonstra visão de produto se destaca no mercado.
Livre para uso educacional e de portfólio.
Criado por Gustavo Bernardi - @guubernardi
Se esse desafio te ajudou, deixa uma ⭐ no repositório — isso ajuda mais devs a encontrarem o projeto.
Inspirado em boas práticas de produto financeiro digital do ecossistema brasileiro.