Este projeto consiste em simular transações bancárias de depósito e saques, logando as transações e calculando o saldo acumulado.
A aplicação é baseada em React e utiliza as seguintes bibliotecas:
- React Router Dom
- Formik
- Jest
- Enzyme
- Storybook
- Babel
- Webpack
Acesse o app atraves do link https://pleaobraga.github.io/account-transactions/
yarn
Após instalar as dependências utilize o comando abaixo para iniciar a aplicação.
yarn start
Espere alguns segundos e automaticamente uma aba do seu navegador será iniciada rodando a aplicação
A porta padrão do projeto é 8080 mas caso deseje mudar, faça como o exemplo abaixo (mudando para a porta 3000)
yarn start -- --port=3000
yarn build
Os testes automatizados foram escritos usando as bibliotecas Jest e Enzyme.
O ambiente utilizado para o desenvolvimento foi o Linux ubunto, dessa forma devido a formatação de caracteres diferentes pode ser que algum teste baseado em caracteres quebre.
yarn test
A cobertura de testes escrita foi de 93%
yarn test:coverage
Esse Projeto utiliza o storybook como ferramenta de documentação dos elementos da UI, e para acessá-lo basta executar:
yarn storybook
Esse projeto utiliza o Husk.js, e está configurado para executar o lint e testar toda a aplicação antes do push. Caso exista algum teste quebrado ou algo fora dos padrões do lint não será possível executar o push.
O projeto utiliza uma arquitetura baseada em Atomic Design e também utiliza os padrões SOLID
Abaixo podemos ver um pouco sobre a arquitetura do projeto
src
components
Atom
Molecule
Organism
UILess
pages
helpers
services
routes.js
index
Component
index.js
Component.test.js
Component.stories.js
Component.scss
Component.jsx
Cada Componente possui seu próprio teste, stories, arquivo jsx, e um index para exportar o que for necessário
O componente tem fácil manutenibilidade devido a essa arquitetura, é facil de se manter pois está tudo centralizado, dentro da mesma pasta, e caso precise mudar algo, é só acessar a pasta do componente e fazer a mudança no arquivo desejado.
Na pasta Helpers se encontram os arquivos de constantes e funções gerais utilizadas na aplicação
Nos dias atuais precisamos pensar em performance, caso contrário a aplicação poderá não oferecer uma boa experiência para o usuário.
Existe nesse projeto um componente chamado DynamicImport,integrado ao webpack e ele basicamente importa dinamicamente apenas o bundle que aquela página está usando no momento, sendo assim reduzindo muitas vezes a quantidade de arquivos a serem requisitados pelo browser ao carregar uma tela.
Ele foi aplicado no arquivo routes.js, dessa forma cada pagina que voce importar irá criar um bundle otimizado automaticamente.
A seguir um exemplo para de como utilizar o DynamicImport
const WelcomePage = () => (
<DynamicImport
loadComponent={() =>
import(/* webpackChunkName: "welcomePage" */ './pages/WelcomePage')
}
ErrorComponent={ErrorPage}
LoadingComponent={() => <Loading />}
/>
)
Esse componente é melhor que o React.lazy pois ele possui 3 estados diferentes:
- Loading
- Error
- Component
O que difere do React.lazy e React.Suspense que apenas lidam com apenas 2 estados:
- Loading
- Component
O webpack esta configurado para criar o arquivo de vendors com as bibliotecas comuns da aplicação como por exemplo react, redux ...
Foi criado uma aplicação baseada em React, e não foi utilizado o a ferramenta create-ract-app como sua base, mas sim um projeto chamado react-scaffold que é de um projeto open souce de minha autoria, onde o configurei do zero (webpack, eslint...), para maiores detalhes acesse o link https://github.com/pleaobraga/react-scaffold
Utilizando o react-scaffold como base foi-se pensado em uma forma de criar uma aplicação bonita, fácil de usar. Dessa forma foi-se utilizado o Storybook para a criação dos componentes, todos feitos sem utilizar nenhum framework de CSS, tudo feito a mão e do zero. A aplicação utiliza técnicas modernas de CSS como por exemplo Flexbox, Sass, e o layout é Responsivo
Os componentes foram pensados utilizando a arquitetura Atomic Design e Principios SOLID e utilizando boas práticas de Clean Code
Para a aplicação funcionar mesmo se o browser fechar foi utilizado o LocalStorage para armazenar localmente os dados, entre suas vantagens estão
- Funciona em todos os browser
- Suas funções não são assíncronas (nesse projeto foi uma vantagem)
Mesmo não sendo uma opção segura o objetivo era apenas poder salvar os dados sem utilizar um banco de dados e uma api, e utilizá-los novamente
Para não haver acoplamento entre camadas foi criado a pasta Service exportando apenas as funções utilizadas para o manuseio dos dados salvos, dessa forma caso seja necessário a mudança do localstorage por uma outra forma de acessar os dados, é necessário mudar apenas a implementação no services.
Como a aplicação é pequena não houve a necessidade de ter um gerenciador de estados global como por exemplo o Redux, no entanto foi utilizado as React Hooks para criar os componentes, o Formik e o Yup para o formulário, o React-Router-DOM para o gerenciamento de rotas. A aplicação foi testada utilizando o Jest e Enzyme.
A aplicação foi toda desenvolvida na branch develop e após o desenvolvimento margeada na branch master
Algumas features implementadas:
Cada rota apresenta uma conta diferente
localhost:8080/{accountId}
a rota localhost:8080/p cria uma conta p e você pode realizar todas as transações la
caso acesse a rota localhost:8080/1 outra conta, a conta 1 é criada e as transações acontecem apenas nessa nova rota
caso o usuario volte para a rota localhost:8080/p ele verá os dados da conta p novamente
Ao acessar uma rota localhost:8080/{accountId} caso a conta não exista é criada instantaneamente, caso a mesma exista será mostrado os dados existentes.
a rota localhost:8080/ utiliza como padrão o accountId = '0'
Como os dados estão salvos no localStorage é possível manipulá-lo através do console, e por esse motivo foi criado uma validação dos dados da conta. Caso o usuário por algum motivo mude os dados da conta pelo console do browser, Alterando a estrutura da conta, será exibida uma mensagem na tela apontando erro de consistência de dados
Caso o usuário tente acessar uma rota diferente da localhost:8080/{accountId} como por exemplo localhost:8080/1/1 uma erro será exibido na tela
- Implementar um sistema de login para separar melhor os dados de cada conta
- Trocar o localstorage por algo mais seguro como por exemplo o FireBase
- Melhorar o layout para que não seja preciso subir ao topo para criar uma nova transação
- No formulário de criação de transação aplicar uma máscara ao campo de valor
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent