Teste Técnico Frontend

Creditas

Javascript, CSS

Brasil

Finanças

50 - 200

/creditasbr
/Creditas
creditas.com.br

A Creditas é uma plataforma digital de empréstimos focada em empréstimos com garantia.

Sobre o Teste

O desafio de Frontend da Creditas consiste em melhorar uma calculadora de simulação de crédito, implementando funcionalidades e refatorando o código existente. Você deve adicionar a opção de garantia "Imóvel" com suas regras de cálculo correspondentes, como valores mínimos e máximos para empréstimo, prazos e valores mínimos e máximos da garantia. Além disso, é necessário refatorar o código CSS para facilitar a manutenção e organizar o código JavaScript para melhorar sua legibilidade e manutenibilidade. O projeto deve ser desenvolvido em JavaScript puro e você pode executar os testes usando o comando npm test.

Instruções do Teste

Link para o teste técnico original

Baixar Arquivos do Teste Técnico

Challenge Frontend - Creditas

Esse é um teste de nivelamento. Queremos deixar claro que não é esperado que todos consigam realizá-lo por completo, já que é destinado a todos os níveis de carreira. Esperamos que todas as pessoas que queiram trabalhar conosco tentem realizá-lo.

Focamos aqui em design de código e design patterns em JavaScript. O objetivo é avaliar sua experiência em escrever código de fácil manutenção, baixo acoplamento e alta coesão.

A Creditas trabalha sempre com feedbacks construtivos e, portanto, daremos sempre uma atenção especial para todos que submeterem o teste, passando para o candidato quais são os pontos positivos do seu teste e os pontos a melhorar. Vale a pena tentar! :)

Apresentação do problema

Você deverá melhorar a calculadora de simulação de crédito implementada neste projeto.

A interface está previamente definida, assim como os estilos. Os desafios incluem refatorar o código e implementar funcionalidades (detalhados mais abaixo).

Sinta-se à vontade para componentizar o que achar que deve ser componentizado. Só gostariamos que o teste fosse realizado com Javascript puro, nosso querido vanilla. O que acha de encarar o desafio?

O estado atual da calculadora:

Layout

Funcionalidade esperada

A aplicação deverá permitir ao usuário escolher o tipo de garantia que quer utilizar no pedido de empréstimo: "Veículo" ou "Imóvel" (o preenchimento padrão é "Veículo") e seguir as regras de cálculo abaixo.

Regras em comum

  • Taxa de IOF: 6.38%;
  • Taxa de Juros: 2.34%;
  • Valor máximo para empréstimo: 80% do valor da garantia;

Fórmula do valor total a pagar

const valorTotalAPagar = ((iof / 100) + (taxaDeJuros / 100) + (prazo / 1000) + 1) * valorDoEmprestimo

Fórmula do valor da parcela

const valorDaParcela = valorTotalAPagar / prazo

Desafios a cumprir

CSS

  • Refatorar para facilitar manutenção

Atualmente o arquivo CSS possui muitos estilos, o que dificulta a legibilidade. Esperamos que você faça uma boa organização dos estilos, isolando-os para torná-los mais legíveis e, assim, facilitar a manutenção.

HTML / JS

  • Adicionar a opção de garantia "Imóvel" (com as respectivas regras de cálculo)
  • Refatorar código antigo (e organizar código novo) para facilitar manutenção

Hoje, a Creditas possui dois produtos: empréstimo com garantia de veículo e de imóvel. O projeto atual tem implementada apenas a opção de garantia "Veículo", você deve implementar a opção "Imóvel". Ao mudar o tipo de garantia no elemento select, o usuário deve ver as opções de valores e prazos referentes ao tipo selecionado. Ou seja, ao selecionar veículo ou imóvel, você deve mostrar na tela opções diferentes nos campos do formulário e no slider. Veja abaixo os valores correspondentes:

Veículo

  • Valor mínimo para empréstimo: R$ 3.000,00;
  • Valor máximo para empréstimo: R$ 100.000,00;
  • Prazos para veículo : 24 / 36 / 48 meses;
  • Valor mínimo da garantia: R$ 5.000,00;
  • Valor máximo da garantia: R$ 3.000.000,00;

Imóvel

  • Valor mínimo para empréstimo: R$ 30.000,00;
  • Valor máximo para empréstimo: R$ 4.500.000,00;
  • Prazos para imóvel : 120 / 180 / 240 meses;
  • Valor mínimo da garantia: R$ 50.000,00;
  • Valor máximo da garantia: R$ 100.000.000,00;

Por fim, você deve exibir o valor da parcela no campo correspondente a cada mudança nos inputs do formulário.

Desenvolvimento

Pré-requisitos

Você precisa minimamente do NodeJs instalado para rodar a apliação e o Git para baixar o repositório e submeter um pull-request

Configurações para rodar o ambiente

Você precisa conhecer um pouco sobre o Git, que é uma ferramenta que nos ajuda a fazer o controle de versão dos nossos arquivos.

git clone https://github.com/Creditas/challenge.git
cd frontend/
npm install
npm start

Se tudo estiver ok, acesse a url http://localhost:4000/

Construído com

Este projeto possui algumas bibliotecas para nos auxiliar nos testes e rodar a aplicação, são eles: Webpack, Babel, Jest e Eslint.

Tests

Para rodar os testes é necessário executar o comando abaixo:

npm test

Feedback (opcional)

Aqui na Creditas o feedback faz parte da nossa cultura, seria muito gratificante se, tendo concluído ou não o teste, você pudesse contribuir com nosso processo de contração respondendo este pequeno questionário.