Real Profit é uma aplicação para simulação de rentabilidade entre diferentes criptoativos e o tesouro direto pré-fixado.
- Usuário: seleciona um criptoativo
- Usuário: informa a data do investimento
- Usuário: informa o valor investido
- Sistema: processa informações
- Sistema: redireciona para o gráfico
- Usuário: clica na área do gráfico
- Sistema: exibe detalhes dos rendimentos
- Usuário: pode alterar criptoativo
- Usuário: pode alterar data do investimento
- Usuário: pode alterar o valor do investimento
- Usuário: processa informações atualizadas
- Sistema: atualiza informações da simulação
- Seleção do Criptoativo
Nesta funcionalidade utilizei a API CryptoCompare para buscar uma lista dos 10 criptoativos que tiveram maior volume nas últimas 24hs, listando-os no Select implementado no primeiro passo do Stepper e nos Detalhes dos rendimentos.
- Seleção da Data do investimento
Optei por trabalhar com datas no formato timestamp, pois é o formado que a API externa aceita como parâmetro (totimestamp) nas requisições, e criei uma 'lib' de funções para fazer conversões quando necessário, como será possível ver no módulo time.ts.
- Valor investido
Para este campo utilizei o CurrencyTextField um componente de terceiros que já faz toda a validação de números em formato currency.
- Processamento de informações e exibição do gráfico
Nesta parte utilizei o próprio Redux para definir quando o usuário está definindo parâmetros da simulação ou está visualizando o gráfico através do parâmetro simulator do estado global, de forma que depois do processamento, com a alteração no estado, o recarregamento automático de componentes do React levaria o usuário para a página do gráfico.
- Detalhes dos rendimentos
Para a exibição dos detalhes em tempo real criei sagas e actions que seriam disparadas a cada alteração dos campos abertos para edição. Optei por esta sugestão desde o princípio, pois ela daria uma melhor liberdade para o usuário escolher um novo criptoativo, uma nova data ou mesmo um novo valor de investimento, agregando à experiência do usuário.
- Redux, Redux Saga e Estado Global
Desde os primeiros insights pensei a aplicação com estado global com Redux por perceber que apesar de haver muitas informações definidas isoladamente, numa perspectiva global, esses dados seriam interdependentes e todo o fluxo de definição de ativo, data e valor seriam essenciais para a atribuição dos parâmetros da requisição de cotações, e logo deveriam estar acessíveis a qualquer tempo e de qualquer lugar da aplicação.
- TypeScript, Tipos e Estruturas
A sugestão do TypeScript para o desafio veio num ótimo momento. Não tem nem como comparar o desenvolvimento com Typescript e o desenvolvimento sem Typescript. O controle das variáveis, tipos e estrutura dentro da aplicação é algo que trás bastante segurança no desenvolvimento e livra a nós desenvolvedores das tão conhecidas inconsistências.
- React Hooks e Simplicidade
Os React Hooks me permitiram aplicar de forma bem mais simples toda a lógica e estrutura de componentização do React, sem mencionar que o próprio Redux já tem implementações que permitem disparar actions e 'escutar' variáveis da Store, o que permitiu deixar o código muito mais simples do que com versões anteriores do Redux.
- Jest, Unit e Validação
Um ponto que me preocupou muito no início do projeto, uma vez que no desenvolvimento lidamos com matemática mesmo não sendo nosso foco principal, foi a lógica das funções de rentabilidade que pensei para a solução (depois de muita pesquisa). Mas foi algo que eu sabia que com um testes unitários no Jest seria tranquilamente validado.