Bankist é um aplicativo Web que simula um banco online. Foi desenvolvido com base no curso The Complete JavaScript Course 2022: From Zero to Expert! do professor Jonas Schmedtmann como uma forma de praticar HTML5, CSS3 e Javascript.
- Utilizei como base 7-1 architecture pattern para criar os arquivos do SASS dentro do diretório src/scss. Lá consta um arquivo principal chamado main.scss que tem a função de importar os arquivos parciais dentro de sua respectiva pasta.
- Em cada pasta, consta um arquivo index.scss que lista cada um dos outros arquivos, no mesmo diretório, que vão ser incluídos na importação.
- O diretório build consta o arquivo main.css minificado para o deployment do projeto.
- Adicionei SASS ao projeto como uma forma melhor de organizar os diferentes componentes e, por conseguinte, uma melhor manutenção ao mesmo.
O projeto foi desenvolvido com JavaScript, além de HTML5 e SASS(SCSS). Foi usado NPM como gerenciador de pacotes e GULP para compilar SASS em CSS, além de outras dependências utilizadas no desenvolvimento, tais como: Adicionar prefixos proprietários, minificação(compressão).
O aplicativo permite que os usuários:
- Façam transferência para outros usuários.
- Solicitem empréstimo ao banco.
- Gerenciem movimentações na conta.
- Fechem a conta.
- Classifiquem por tipo de movimentação.
Usuário: cs, PIN: 1111
Usuário: ps, PIN: 2222
Usuário: js, PIN: 3333
Usuário: tl, PIN: 4444
Cada usuário possui uma conta com suas respectivas movimentações(saque e depósito) e essas estão armazenadas em um objeto. Cada um desses objetos contêm dados importantes, tais como:
- Proprietários da conta.
- Array de movimentações.
- Taxa de Juros.
- PIN
- Datas das movimentações na conta.
- Moeda do país.
- Localização de cada usuário.
Para fazer login na conta, é necessário um nome de usuário e PIN. Esses dados são gerados a partir da primeira letra do nome e a primeira letra do sobrenome.
Um exemplo de nome de usuário: cs. Foi gerado a partir do nome completo Carla Santos.
As movimentações são armazenadas em um array de movimentos em cada objeto da conta. Esse objeto possui informações, tais como:
- Informação sobre o tipo de movimentação: Depósito ou Saque.
- Data das movimentações.
- Valor monetário da movimentação.
- Saldo total.
O cronômetro no canto inferior direito indica o tempo restante antes do encerramento da sessão. Assim que for encerrada, o usuário terá que fazer login novamente. Foi definido um tempo de 10 minutos. O usuário poderá também clicar no botão para sair da conta atual.
O dia da semana, data e a hora foram formatadas usando Internationalization API. A mesma coisa acontece com todas as moedas do aplicativo. Cada descrição da movimentação contém informação dos dias que se passaram. Além disso, a localidade é baseada no idioma do navegador do usuário. Tais informações sobre localidade e idioma foram armazenadas no Array de movimentações.
O sumário exibe informações sobre o total de depósitos, saques e a taxa de juros. O banco faz um pagamento ao cliente por cada depósito em sua conta. Esse pagamento é igual a taxa de juros que fica armazenada no objeto da conta.
Um exemplo de taxa de juros é: 1.1, que é 1,1% do depósito.
O usuário pode encerrar sua conta a qualquer momento. Basta digitar o nome de usuário e o PIN.
Para Iniciar o projeto, faça o clone desse repositório ou baixe de forma local em seu sistema. Você pode visualizar clicando no link Bankist.
Antes de começar, você precisa instalar, em sua máquina, as seguintes ferramentas: Git, Node.js e um editor de código, como VSCode.
Siga as instruções abaixo para obter uma cópia local:
# Clone este repositório.
$ https://github.com/carla-santos/bankist-bank.git
# Acesse a pasta do projeto no seu terminal/cmd/(Git bash).
$ cd bankist-bank
# Instale as dependências.
$ npm install
# Execute a aplicação.
$ gulp dev
Utilize uma ferramenta como o Live Server para criar um servidor local e executar o projeto.
O projeto está sob a licença MIT. Para saber mais, acesse o arquivo LICENÇA.
- Lançamento inicial
28.08.2022