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.