Esse projeto foi criado utilizando Create React App.
Este repositório contém o frontend challenge, feito em ReactJS e utiliza as seguintes bibliotecas:
- react-router-dom
Apesar de possuir apenas uma página, essa biblioteca foi escolhida pensando na possibilidade de adicionar fácilmente novas rotas ao projeto.
- pigeon-maps
Essa biblioteca foi escolhida para ser utilizada no componente que possui mapa, devido a sua facilidade de instalação e utlização sem precisar de nenhum tipo de access token
- react-chartjs-2
Essa biblioteca foi escolhida por ser um wrapper de uma biblioteca muito famosa do JavaScript, o chartjs. Ela é de fácil instalação e utilização.
- react-vertical-timeline-component
Essa biblioteca foi escolhida para fazer parte do componente de timeline para que não fosse necessário reimplementar algo que já existia e atendia as necessidades do projeto
Para que esse projeto funcione corretamente é necessário:
Clonar ou baixar o projeto, após isso instalar as dependências:
npm install
Em seguida é necessário iniciar o servidor do ReactJs:
npm start
E pronto, agora é só acessar http://localhost:3000.
Os dados utilizados para alimentar os componentes encontram-se no arquivo mock.js
É o cartão de identificação, e mostra as informações básicas do cliente
Cartão das oportunidades do cliente: ganhas, perdidas, abertas e descartadas
O BaseIndicator é um componente base utilizado tanto no OpportunitiesCard quanto no FinancialSecurityCard, ele permite mostrar indicadorer de duas formas diferentes.
Cartão que exibe as informações de venda, ele mostra a linha das vendas realizadas e também uma linha de predição para o próximo mês, os valores mostrados são randômicos.
Cartão responsável por mostrar a localização do cliente, componente simples e que possibilita dar zoom no mapa.
Componente responsável por mostrar o limite de crédito concedido e disponível do cliente.
Componente responsável por mostrar os títulos financeiros do cliente, ele também usufrui do BaseIndicator
Componente responsável por mostrar as atividades do cliente, independente de quantas categorias de atividade ele tenha, ele também possui um campo de pesquisa que pode ser utilizado para filtrar as atividades, para filtrar por categorias é necessário clicar nas mesmas que se encontram abaixo do campo de busca.
Esse componente é utilizado na parte de filtragem de atividades por categoria e se encontra abaixo do campo de pesquisa.
Componente renderizado dentro das categorias de atividades.
