Hello there! đź‘‹
VocĂŞ foi selecionado para nosso teste de Front-End. VocĂŞ deve:
- Criar uma single page application utilizando os arquivos do protĂłtipo abaixo;
- Obter os dados através da API -> https://swapi.dev/documentation;
- Entregar a sua implementação do desafio neste repositório.
Recomendamos utilizar as seguintes tecnologias para desenvolver o seu projeto:
- Angular 16 ou Vue 3 (Nuxt 3);
- HTML/CSS (pré-processadores de CSS - variaveis, mixins, etc);
- Git.
-
A primeira página deve exibir um campo solicitando o e-mail do usuário. Caso o e-mail digitado nĂŁo tenha no mĂnimo 3 caracteres e o caracter "@", deve-se mostrar uma mensagem de erro. Enquanto o e-mail nĂŁo estiver correto, o botĂŁo para o prĂłximo slide deve ser bloqueado.
-
A segunda página somente poderá ser acessada por quem digitou o endereço de e-mail corretamente conforme os critérios do item #1. Ali haverá um campo de texto pedindo o nome de um dos personagens do Star Wars (exemplos que funcionam na API sugerida: "Darth Vader" e "R2-D2").
-
Ao fazer a busca, deverá mostrar um estado de "loading" enquanto o resultado da API nĂŁo Ă© obtido (atenção para o Ăcone que deve aparecer e desaparecer enquanto o resultado nĂŁo foi retornado).
-
Exibir informações obtidas pela API conforme desenhado. Salvar o resultado quando acessar a página novamente.
Utilizar o sistema de rotas para cada uma das páginas (com excessão do "loading" que será junto com o segundo slide)
- Tenha atenção com a parte visual;
- Organize suas tarefas criando issues;
- Crie componentes para reaproveitar cĂłdigo.