💸 Bytebank

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
• Vídeo de Demonstração: Bytebank Demo

---

📄 Desafio Original

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.

---

🚀 Stack utilizada

• Next.js (App Router) – Framework React fullstack
• NextAuth – Autenticação e autorização
• TypeScript – 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

---

📁 Estrutura de Branches

Branch	Finalidade
main	Produção (deploy da aplicação principal)
dev	Desenvolvimento principal

---

💡 Funcionalidades (pelas telas)

1. Home (Login/Cadastro)

   • Acesso seguro à plataforma.
   • Cadastro de novos usuários com dados básicos (nome, e-mail, senha).

2. Dashboard

   • Visão geral do saldo disponível.
   • Cards com informações financeiras.

3. Transações

   • Histórico de transações.
   • Cadastro de novas transações (entrada/saída).
   • Edição e exclusão de transações.

4. 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.

5. Configurações

   • Configuração de dados pessoais.
   • Alteração de senha.
   • Exclusão de conta.

---

📦 Como rodar o projeto

💡 Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git e Node.js.

Clone o repositório do projeto

git clone https://github.com/Brendhon/Bytebank.git

Acesse a pasta do projeto

cd Bytebank

Instale as dependências

npm install

📄 Configuração das Variáveis de Ambiente

1. Crie um arquivo .env.local na raiz do projeto.

2. 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

3. 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

4. Segurança das APIs:

Uma chave de autenticação é utilizada para proteger os endpoints da API contra acessos não autorizados. Essa chave é automaticamente incluída nas requisições realizadas pelo front-end, garantindo que apenas chamadas legítimas da aplicação possam acessar os endpoints protegidos. Isso impede que ferramentas externas, como Postman ou bots, realizem requisições diretamente à API.

Para configurar a chave de autenticação, adicione a seguinte variável de ambiente no arquivo .env.local:

NEXT_PUBLIC_API_KEY=sua_chave_api

🔐 Dica de segurança:
Gere uma chave segura usando o comando abaixo no terminal:

openssl rand -hex 32

Copie o valor gerado e use como NEXT_PUBLIC_API_KEY.

⚠️ Aviso Importante: Esta abordagem de segurança (utilizar uma API_KEY pública no front-end para autenticar chamadas internas) não é recomendada para aplicações em produção, pois o valor da variável pode ser exposto e facilmente acessado.

Em um ambiente de produção, recomenda-se implementar uma autenticação mais robusta, como OAuth ou JWT (JSON Web Tokens), para proteger os endpoints da API e garantir a segurança dos dados do usuário.

No entanto, por se tratar de um projeto de estudo, optou-se por esta solução simplificada para fins didáticos.

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.

🏃‍♂️ Executando o projeto

Para rodar o projeto em modo de desenvolvimento, execute o seguinte comando:

npm run dev

Acesse o projeto em seu navegador: http://localhost:3000

📦 Executando o Storybook

Para rodar o Storybook, execute o seguinte comando:

npm run storybook

Acesse o Storybook em seu navegador: http://localhost:6006

---

👥 Autor

Brendhon Moreira