O projeto utiliza o gerenciador de pacotes NPM
. Instale os pacotes com o comando npm i
para prosseguir com a construção.
Para executar o projeto, use npm start
.
O teste consiste em utilizar React para uma simples aplicação que exibe o valor de ações através de chamadas de API. Crie uma tela apenas com um input de texto que receberá um símbolo de ação (ex: aapl para Apple, fb para Facebook, twtr para Twitter) e retornará o último valor de ação da empresa, assim como outras informações relevantes. Sinta-se livre para utilizar quaisquer dependências que você desejar no npm e auxiliar no desenvolvimento da aplicação.
- Utilizar componentes React para montar a interface e Redux para controlar o estado;
- Você pode utilizar a API gratuita do IEX para obter os dados necessários;
- A documentação da API sugerida pode ser acessada aqui;
- As informações de ações para cada símbolo são encontradas aqui (Estamos interessados apenas no
latestPrice
) - A mesma API também retorna as informações mais relevantes da empresa
- Plotar um gráfico com a evolução do valor das ações (PS: utilizamos o pacote Recharts)
Se você gostaria de fazer um pouco mais, sugerimos os seguintes desafios:
- Componentes reutilizáveis: que tal montar a interface usando seus próprios componentes de apresentação? Uma ideia: criar componentes genéricos de UI que poderiam ser utilizados em outros projetos. É o que fazemos internamente com nossos projetos! Adoramos o
styled-components
; - Atualizações: a API é atualizada quase em tempo real e poderia atualizar as informações de acordo (conforme faz o Yahoo! Finance)
- Animação à la Bloomberg: exibir em formato de marquee o valor e variação percentual do valor das ações
- React para _view;
- Redux para_ framework_ de estado;
Itens que foram concluídos:
Pré-requisitos:
- Crie uma tela apenas com um input de texto que receberá um símbolo de ação e retornará o último valor de ação da empresa;
- Obter dados extras da empresa;
- Utilizar componentes React para montar a interface e Redux para controlar o estado;
- Plotar um gráfico com a evolução do valor das ações. Foi Utilizado o pacote [Recharts].
Extra:
- Componentes reutilizáveis com Styled-Components;
- Atualizações: a API é atualizada quase em tempo real;
- Exibir em formato de marquee o valor e variação percentual do valor das ações.