GamaBank - Versão WEB

Desenvolvido pela equipe da CodeCommit. Deploy aqui.

Equipe | Libs | Features | Arquit. de pastas | Arquit. Flux - Redux | Testes | Mindmap | Como usar | Licença

Projeto desenvolvido na academia da Gama Academy em parceria com a Accenture com objetivo de aplicar todos os conceitos aprendidos durante o curso e apresentar para banca como projeto final!

Equipe da CodeCommit

  Alisson O.  |  Ana Laura  |  Gabriel M. |  Gabriel N.  |  Glauber A.  | Igor Santos

Libs

• ReactJS
• Typescript
• axios
• jest
• react-redux
• react-router-dom
• styled-components
• jsonwebtoken
• react-toastify
• yup
• unform

Features

Conexão com API para:

• Cadastro e autenticação de usuários
• Recuperação de senha do usuário
• Busca das informações do usuário e da sua conta
• Transferências entre contas de usuários
• Fazer depósitos
• Fazer pagamentos
• Cadastrar planos
• Testes

Outras características:

• Componentização de elementos da interface para o reaproveitamento de código
• Responsividade
• Validação de input com unform
• Alertas de mensagens com Yup e React Toastify
• Arquitetura de Design: Atomic Design para organização dos componentes

Arquitetura de pastas

├── src
│   ├── assets
|   |   ├── svgs
|   ├── components
|   |   ├── Button
|   |   ├── Dashboard
|   |   |   ├── Balance
|   |   |   ├── CardMenu
|   |   |   ├── CardMenuMobile
|   |   |   ├── Deposit
|   |   |   ├── Extract
|   |   |   ├── MenuModal
|   |   |   ├── Payments
|   |   |   ├── Plans
|   |   |   ├── Transactions
|   |   ├── Header
|   |   ├── Input
|   |   ├── Loader
|   |   ├── Logo
|   |   ├── Tooltip
|   ├── docs
|   ├── Pages
|   |   ├── Dashboard
|   |   ├── Error
|   |   ├── ErrorRecover
|   |   ├── Landing
|   |   ├── Login
|   |   ├── RecoverPassword
|   ├── store
|   |   ├── dashboard
|   |   ├── user
|   ├── styles
|   ├── types
|   ├── utils
|   ├── App.tsx
│   ├── customToast.css
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   ├── routes.tsx

Arquitetura Flux

Foi utilizado o Redux para globalização dos dados do usuário, necessário para requisições em API e para impedir requisições desnecessárias na API, melhorando significativamente a experiencia do usuário durante a utilização do GamaBank.

Testes

Foi realizado o teste dos componentes de input, simulando e verificando o funcionamento dos formulários de cadastro, login e recuperação de senha. Tendo êxito em todos os testes.

Mindmap

Como Usar

Clonando o repositório

git clone https://github.com/igorsantos97/bank-acc-react.git

Entrando no diretório do projeto

cd bank-acc-react

Instalando as Dependências

yarn install

Iniciando a Aplicação

yarn start

Licença

Esse projeto utiliza a LICENÇA MIT.