Aplicação desenvolvida como parte do Tech Challenge (Postech - Front-End), que simula um site bancário simples. Permite cadastro de transações financeiras, visualização de extrato detalhado e acesso a serviços financeiros, com foco em acessibilidade, componentização e boas práticas de desenvolvimento.
- Figma: Bytebank Figma
- Storybook: Bytebank Storybook
- Deploy: Bytebank Web
O documento contendo os requisitos e objetivos do desafio original da pós-tech está disponível para consulta:
📌 POSTECH - Front-end - Tech Challenge - Fase 1
Esse arquivo resume o escopo funcional e visual proposto para o projeto, com base no modelo de design fornecido e funcionalidades essenciais que deveriam ser implementadas.
- Vídeo de Demonstração: Bytebank - Fase 1
Nesta fase, a aplicação foi evoluída para incorporar conceitos avançados de arquitetura de software, com foco em escalabilidade, segurança e otimização de performance.
📌 POSTECH - Front-end - Tech Challenge - Fase 4
As principais melhorias incluem:
- Clean Architecture: Separação rigorosa das camadas de apresentação (UI), domínio (hooks) e infraestrutura (serviços, API).
- Segurança Robusta: Correção de uma vulnerabilidade crítica de exposição de API Key e migração para autenticação segura com NextAuth.js, implementando validação de propriedade de recursos em todas as operações.
- Otimização de Performance: Adoção de React Server Components para reduzir o processamento no cliente, e uso de Server Actions com revalidação de cache para otimizar mutações de dados.
Para uma análise detalhada de como cada requisito foi atendido, com mapeamento para as implementações no código, consulte o Documento de Avaliação Arquitetural:
➡️ Análise Arquitetural Completa (Fase 4)
Detalhe: Para uma análise aprofundada das melhorias e decisões arquiteturais de um arquivo específico, consulte o analysis.md localizado no diretório de cada arquivo.
- Vídeo de Demonstração: Bytebank - Fase 4
- Next.js 16.0.3 (App Router) – Framework React fullstack com Turbopack como bundler padrão
- React 19.2.0 – Biblioteca UI moderna
- NextAuth – Autenticação e autorização
- TypeScript 5+ – Tipagem estática e segurança no código
- Tailwind CSS – Estilização utilitária e responsiva
- Headless UI – Componentes acessíveis e sem estilo
- Lucide Icons – Ícones leves e modernos
- MongoDB Atlas + Mongoose – Banco de dados NoSQL e ORM
- React Hook Form + Zod – Manipulação e validação de formulários
- Storybook – Documentação visual
- Vercel – Deploy automatizado
Veja o arquivo package.json
Next.js 16 Upgrade (Janeiro 2025)
- ✅ Atualizado para Next.js 16.0.3 (anteriormente 15.2.5)
- ✅ Turbopack agora é o bundler padrão (substitui webpack)
- ✅ React 19.2.0 (anteriormente 19.0.0)
- ✅ Middleware migrado para Proxy (
src/middleware.ts→src/proxy.ts) - ✅ ESLint migrado para Flat Config (ESLint CLI)
- ✅ APIs assíncronas:
params,searchParams,cookies(),headers()agora retornam Promises
| Branch | Finalidade |
|---|---|
main |
Produção (deploy da aplicação principal) |
dev |
Desenvolvimento principal |
-
Home (Login/Cadastro)
- Acesso seguro à plataforma.
- Cadastro de novos usuários com dados básicos (nome, e-mail, senha).
-
Dashboard
- Visão geral do saldo disponível.
- Cards com informações financeiras.
-
Transações
- Histórico de transações.
- Cadastro de novas transações (entrada/saída).
- Edição e exclusão de transações.
-
Meus Cartões
- Exibição de uma lista de cartões previamente cadastrados.
- Opção para visualizar informações detalhadas de cada cartão.
- Funcionalidade para bloquear ou desbloquear cartões diretamente na interface.
- Página projetada como exemplo de renderização no lado do servidor utilizando dados estáticos.
-
Configurações
- Configuração de dados pessoais.
- Alteração de senha.
- Exclusão de conta.
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
- Git
- Node.js 20.9+ (requerido para Next.js 16)
- npm ou outro gerenciador de pacotes
Clone o repositório do projeto
git clone https://github.com/Brendhon/Bytebank.gitAcesse a pasta do projeto
cd BytebankInstale as dependências
npm install-
Crie um arquivo
.env.localna raiz do projeto. -
Adicione as seguintes variáveis de ambiente no arquivo
.env.local:
# Substitua <user> e <password> pelas credenciais do seu MongoDB Atlas, mantendo o nome do banco de dados como "bytebank".
MONGODB_URI=mongodb+srv://<user>:<password>@cluster.mongodb.net/bytebank
# Chave secreta para autenticação
NEXTAUTH_SECRET=sua_chave_secreta
# URL base do site
NEXTAUTH_URL=http://localhost:3000
# URL base da API
NEXT_PUBLIC_API_URL=http://localhost:3000- Para habilitar links diretos para o Storybook, Figma e Github no menu de perfil do usuário, adicione também as seguintes variáveis de ambiente:
# URL do Storybook
NEXT_PUBLIC_STORYBOOK_URL=http://localhost:6006
# URL do Figma
NEXT_PUBLIC_FIGMA_URL=https://www.figma.com/file/E9UFSc9LUXlL88hIvIcuLd/Modelo-Fase-1---P%C3%93S-FIAP?node-id=503-4264
# URL do GitHub
NEXT_PUBLIC_GITHUB_URL=https://github.com/Brendhon/Bytebank- Segurança das APIs:
Os endpoints da API são protegidos através de autenticação baseada em sessão, utilizando NextAuth.js com estratégia JWT. Quando um usuário faz login, uma sessão segura é criada e mantida através de cookies HTTP-only, que são automaticamente enviados em cada requisição.
Como funciona:
- O usuário realiza login através da interface da aplicação
- O NextAuth cria uma sessão JWT armazenada em cookies seguros
- Todas as requisições do front-end para as rotas
/api/*incluem automaticamente os cookies de sessão - As rotas de API validam a sessão antes de processar qualquer operação
- Apenas usuários autenticados podem acessar dados e realizar operações
Benefícios desta abordagem:
- ✅ Cookies HTTP-only não são acessíveis via JavaScript (proteção contra XSS)
- ✅ Tokens JWT não são expostos no código do cliente
- ✅ Proteção CSRF nativa do NextAuth
- ✅ Expiração automática de sessões após 24 horas
- ✅ Validação de propriedade de recursos (usuários só podem acessar seus próprios dados)
Nota: Substitua as URLs acima caso esteja utilizando endereços personalizados ou ambientes de produção.
Certifique-se de salvar o arquivo após realizar as alterações.
Para rodar o projeto em modo de desenvolvimento, execute o seguinte comando:
npm run devAcesse o projeto em seu navegador: http://localhost:3000
Nota: O projeto utiliza Turbopack como bundler padrão (Next.js 16). Para usar webpack, adicione a flag
--webpackao comando:npm run dev -- --webpack
Para rodar o Storybook, execute o seguinte comando:
npm run storybookAcesse o Storybook em seu navegador: http://localhost:6006
Brendhon Moreira
