Este arquivo também está disponível em outros idiomas: Inglês.
Projeto | Techs | Informações Gerais | Instalação | Inicialização | Testes | Licença
Esse repositório contêm um desafio front-end proposto pela iClinic.
O propósito da aplicação é mostrar ao usuário em qual lado da Força ele faz parte e qual o seu mestre, com base no tempo de resposta de duas requisições à SWAPI (uma API do Star Wars) - o determinante aqui é qual requisição retorna os dados primeiro.
Há duas opções para o alinhamento/mester:
- Luz, o mestre será Luke Skywalker;
- Sombrio, o mestre será Darth Vader.
Hospedado aqui.
Como explicado acima, o alinhamento/mestre é definido por qual requisição é finalizada primeiro, para atingir isso foi utilizado Promise.race(). O serviço que fica responsável por essas requisições foi separado dentro da pasta src/services, para individualizar a sua responsabilidade e facilitar nos testes unitários.
Para determinar o alinhamento, foi implementado uma regra que compara a URL da resposta da Promise.race, já que no endpoint que retorna os dados do mestre não há uma propriedade indicando o alinhamento dele.
O alinhamento é utilizado dentro da aplicação para definir a UI das telas (cores, em específico), ao invés de usar diretamente o nome do mestre.
Os dados de alinhamento/mestre e loading das requests ficam dentro do hook usePeople para poder compartilhar os dados entre os componentes que os utilizam, assim como à função que chama o serviço define-master.
Enquanto a aplicação faz as requisições, os botões ficam desativados e o texto é substituído por um spinner para melhorar a experiência do usuário, também é apresentado uma notificação que indica ao usuário qual alinhamento ele faz parte ou caso ocorra algum erro no fluxo.
Na página onde apresenta qual é o mestre, há uma regra que redireciona o usuário para página inicial caso ele não tenha iniciado o fluxo através da página inicial. Isso foi implementado para impedir que o usuário acesse diretamente a rota /master e fazer com que o processo sempre deva iniciar na página inicial através do botão "Start" (eliminando a necessidade do useEffect toda vez que ele acessa a rota, seja recarregando a página ou acessando ela diretamente).
No entanto, ele consegue redefinir seu alinhamento/mestre clicando no botão choose your path again, Padawan, como orientado na descrição do desafio.
Foi implementado uma página adicional caso o usuário tente acessar uma rota inexistente, ela evidencia que a página tentando ser acessada não existe e contém um link que redireciona o usuário para a página inicial.
gravac__a__o_de_tela_2021-10-09_a__s_16.18.41_1.mp4
gravac__a__o_de_tela_2021-10-09_a__s_16.21.01_1.mp4
gravac__a__o_de_tela_2021-10-09_a__s_16.22.11_1.mp4
Primeiro clone o projeto utilizando git clone https://github.com/leoronne/whats-my-path.git e depois instale as dependências utilizando yarn no seu terminal (no diretório raiz do projeto).
Para iniciar a aplicação, utilize yarn start no seu terminal.
Nota: Lembre-se de criar um arquivo .env no diretório raiz do projeto baseado no arquivo de exemplo.
Para rodar os tests dessa aplicação, utilize o comando yarn test no seu terminal. Caso você deseje gerar os arquivos de cobertura dos testes, utilize yarn test:cover.
- MIT license
- Copyright 2021 © Leonardo Ronne.