Esse é o teste para desenvolvedores na Pontua Web.
Sinta-se livre para editar a partir do título "Documentação da Aplicação".
Essa aplicação deve ser criada com base e utilização na api fornecida pela Marvel
https://www.figma.com/file/QFEzv3O4PWCzmvicy7e7sm/Teste-de-Desenvolvimento?node-id=0-1&t=D2fOR8TxhmRi52td-0 https://www.markdownguide.org/extended-syntax/ https://developer.marvel.com/documentation/authorization https://rapidapi.com/ujjandeveloper/api/register-and-login-with-jwt-token/
Qualquer dúvida poderá ser enviada por e-mail em tecnologia@pontua.com.br;
O prazo para finalização do teste deverá ser fornecido pelo RH;
>Não deixe de entregar sua aplicação mesmo que não esteja pronta ou perfeita;
A entrega do código deverá ser feita no GitHub e após o término, notificar o time atráves do e-mail tecnologia@pontua.com.br e gente@pontua.com.br.
Link para layout no Figma: layout
Eu como usuário:
Irei inserir o meu e-mail e senha de acesso para navegar para a tela de Agentes.
Quando eu:
Clicar no botão entrar, se sucesso deverá navegar para a próxima tela, caso ocorra erro, ver uma notificação;
informando que o email ou senha está inválido.
Quando eu clicar deverá redirecionar para a tela de esqueci minha senha.
- Validação de e-mail e senha;
- Navegar para próxima página;
- Exibir mensagem de erro;
- Ser o mais fiel possível ao layout do Figma.
Eu como usuário:
Irei selecionar o agente de minha escolha para acessar a página de perfil do agente.
Quando eu:
Clicar no campo de escolha deverá ser exibido uma lista com os nomes e foto do perfil de cada agente, e ao clicar no botão entrar ser redirecionado para a tela de perfil do agente;
- Se não houver agente selecionado mostrar o placeholder "Selecione um agente" conforme Figma;
- Se já exitir um agente selecionado e eu clicar no campo de escolha, exibir a lista de agentes com uma flag no agente;
- já selecionado;
- Ao clicar no botão entrar deverá navegar para a página de perfil do agente selecionado;
- Ser o mais fiel possível ao layout do Figma.
Eu como usuário:
Ao acessar a tela preciso ver a aba de visão geral com o descritivo sobre o agente, bem como seu nome e imagem;
Quero poder navegar nas abas de características, conforme layout do Figma;
Preciso visualizar o menu com as opções de acessar a Home, Perfil e sair do sistema.
Quando eu:
Clicar em uma das abas disponíveis daquele agente, preciso ver uma lista com as informações daquela aba.
- Exibir as informações dos agentes;
- As abas do perfil devem ser dinâmicas de acordo com cada agente;
- Ao clicar nas abas mostrar as listagens com as informações relativas;
- Exibir o menu lateral com link para Home, Perfil e Logout;
- Ser o mais fiel possível ao layout do Figma;
Eu como usuário:
Desejo visualizar uma lista de cards com fotos de perfil e um resumo de personagens;
Quero poder navegar na lista pela paginação no final da página;
Quando eu clicar no campo de pesquisa e digitar o nome do agente, me mostre somente os personagens que contém aquele termo buscado.
Quando eu:
Clicar no card do personagem, deverei ser redirecionado para a página de perfil do personagem escolhido;
Fizer uma busca, o sistema deverá exibir na lista somente os personagens que contém aquele nome.
Clicar no botão "Próxima" deverá exibir os próximos cards da lista (próxima página);
Clicar no botão "Anterior" deverá exibir os cards anteriores da lista (página anterior);
Quando eu clicar no botão com número de páginação, exibir os cards relativos aquela página selecionada.
- Exibir resumo e foto de perfil;
- Listagem mínima de 11 personagens
- Exibição de no mínimo na primeira página
- Exibição de no máximo 10 personagens por página;
- Ao clicar em um card ser redirecionado à página de perfil do mesmo;
- Ser o mais fiel possível ao layout do Figma;
Eu como usuário:
Irei inserir o email que realizei o cadastro na plataforma no campo disponivel e, clicarei no botão enviar link.
Quando eu:
Clicar no botão de enviar link, deverá aparecer a mensagem de envio com sucesso.
- Ser o mais fiel possível ao layout do Figma;
Você pode escrever a documentação da sua aplicação a partir daqui...