Documentação IB e Admin

IB (Internet Banking Web)

Descrição

O IB é uma aplicação web de Internet Banking que utiliza uma arquitetura frontend moderna baseada em React e Vite. A aplicação consome uma API para gerenciar temas dinamicamente e autenticação baseada em tokens. O deploy é realizado na AWS Amplify, com ambientes de produção e staging.

Tecnologias e Versões

A seguir, as principais tecnologias e bibliotecas utilizadas no projeto IB, conforme especificado:

• Vite: Ferramenta de build e desenvolvimento para aplicações React, utilizada para otimizar o desempenho e a experiência de desenvolvimento.
• React: Biblioteca principal para construção da interface, versão 18.3.1.
• PNPM: Gerenciador de pacotes, utilizado para gerenciar dependências de forma eficiente.
• Ant Design: Biblioteca de componentes UI, versão 5.21.2, atualmente em processo de migração para Storybook para documentação e desenvolvimento de componentes.
• Axios: Biblioteca para requisições HTTP, versão 1.7.7, com um interceptor para renovação automática de tokens.
• Outras bibliotecas:
  • cep-promise: 4.4.1 (consultas de CEP).
  • dayjs: 1.11.13 (manipulação de datas).
  • graphql: 16.9.0 (consultas GraphQL).
  • html2canvas: 1.4.1 (captura de telas em canvas).
  • jose: 5.9.3 (manipulação de JWT).
  • js-cookie: 3.0.5 (gerenciamento de cookies).
  • jspdf: 3.0.1 (geração de PDFs).
  • jwt-decode: 4.0.0 (decodificação de JWT).
  • npm-check-updates: 17.1.3 (atualização de dependências).
  • platform: 1.3.6 (detecção de plataforma).
  • qrcode.react: 4.0.1 (geração de QR codes).

Autenticação

• Mecanismo: A aplicação utiliza access token e refresh token para autenticação.
• Processo:
  1. Durante o login, o usuário obtém um access token e um refresh token via API.
  2. Um interceptor do Axios monitora as requisições e renova automaticamente o access token utilizando o refresh token quando necessário.
  3. Tokens são armazenados de forma segura, utilizando a biblioteca js-cookie para gerenciamento de cookies.

Configuração de Ambiente

O projeto inclui um arquivo .env descrito no README do repositório, contendo variáveis de configuração para:

• Endpoints da API.
• Chaves de autenticação.
• Configurações específicas para ambientes prod e staging.

Exemplo de estrutura do .env:

VITE_API_URL=https://api.ib.example.com
VITE_AUTH_TOKEN_KEY=ib_auth_token
VITE_ENV=production

Deploy

• Plataforma: AWS Amplify.
• Ambientes:
  • Produção: Configurado para alta disponibilidade e escalabilidade.
  • Staging: Utilizado para testes e validação antes de atualizações em produção.
• Processo:
  1. O código é versionado em um repositório Git.
  2. Amplify realiza o build automaticamente ao detectar alterações no repositório.
  3. Configurações específicas de ambiente são aplicadas via variáveis de ambiente.

Instruções de Inicialização

O README do repositório contém instruções detalhadas para iniciar a aplicação e realizar operações. Um resumo típico inclui:

1. Clonar o repositório.
2. Instalar dependências com pnpm install.
3. Configurar o arquivo .env com as variáveis necessárias.
4. Iniciar o servidor de desenvolvimento com pnpm dev.
5. Para build de produção: pnpm build.

---

Admin

Descrição

A aplicação Admin é uma interface administrativa mais simples, projetada para gerenciar operações internas. Utiliza React com uma stack moderna, incluindo Tailwind CSS para estilização e React Query para gerenciamento de estado assíncrono.

Tecnologias e Versões

A seguir, as principais tecnologias e bibliotecas utilizadas no projeto Admin:

• React: Biblioteca principal, versão 18.3.1.
• Tailwind CSS: Framework de estilização, versão 3.4.12.
• React Query: Gerenciamento de estado assíncrono, versão 3.39.3.
• React Router DOM: Roteamento, versão 6.26.2.
• Styled Components: Estilização de componentes, versão 6.1.19.
• Outras bibliotecas:
  • dayjs: 1.11.13 (manipulação de datas).
  • i18next: 23.15.1 (internacionalização).
  • js-cookie: 3.0.5 (gerenciamento de cookies).
  • json-server: 1.0.0-beta.2 (mock de API para desenvolvimento).
  • jwt-decode: 4.0.0 (decodificação de JWT).
  • lodash: 4.17.21 (utilitários JavaScript).
  • otpauth: 9.3.2 (autenticação OTP).
  • papaparse: 5.4.1 (parsing de CSV).
  • postcss: 8.4.47 (processamento de CSS).
  • react-chartjs-2: 5.2.0 (gráficos).
  • react-hook-form: 7.53.0 (gerenciamento de formulários).
  • react-i18next: 15.0.2 (integração com i18next).
  • react-icons: 5.5.0 (ícones).
  • react-input-mask: 2.0.4 (máscaras de entrada).
  • react-number-format: 5.4.2 (formatação de números).
  • tailwind-merge: 2.5.2 (utilitário para Tailwind).
  • zustand: 4.5.5 (gerenciamento de estado).

Autenticação

• Mecanismo: Similar ao IB, utiliza autenticação baseada em JWT com jwt-decode para decodificação de tokens.
• Cookies: Gerenciados via js-cookie para armazenar tokens de forma segura.
• OTP: Suporte a autenticação de dois fatores (2FA) utilizando a biblioteca otpauth.

Configuração de Ambiente

O Admin também utiliza um arquivo .env para configurações, com variáveis semelhantes às do IB, mas adaptadas para o contexto administrativo. Exemplo:

REACT_APP_API_URL=https://api.admin.example.com
REACT_APP_AUTH_TOKEN_KEY=admin_auth_token
REACT_APP_ENV=production

Deploy

• Plataforma: AWS Amplify (assumido, com base no IB, a menos que especificado).
• Ambientes:
  • Produção: Ambiente estável para uso administrativo.
  • Staging: Utilizado para testes.
• Processo: Similar ao IB, com build e deploy automatizados via Amplify.

Instruções de Inicialização

1. Clonar o repositório.
2. Instalar dependências com npm install ou pnpm install.
3. Configurar o arquivo .env.
4. Iniciar o servidor de desenvolvimento com npm run dev ou pnpm dev.
5. Build de produção: npm run build ou pnpm build.

---

Notas Gerais

• Storybook: O IB está migrando para o Storybook para documentação e desenvolvimento de componentes, o que será refletido em atualizações futuras.
• Manutenção: A biblioteca npm-check-updates no IB facilita a atualização de dependências, garantindo compatibilidade com versões mais recentes.