Desenvolver uma aplicação web com o objetivo de avaliarmos o seu domínio em front-end, ou seja, sua organização, estilo e boas práticas com o código, conhecimento dos frameworks e tecnologias utilizadas.
- Landing page com um botão para iniciar a aplicação (qualquer url inexistente deve redirecionar o usuário para essa landing page).
- Personagem no centro da página.
- Barra na esquerda indicando quantos Pokémons ele já capturou (limite de 6) + botão de criação.
- Ao passar o mouse no personagem é exibido o tooltip correspondente.
- Ao clicar no personagem é feita uma busca por um Pokémon aleatório (id de 1 a 807).
- Com o resultado da busca é aberto um modal mostrando os detalhes do Pokémon.
- Usuário tem a opção de capturá-lo, clicando na pokébola, ou fechar o modal.
- Se ele capturar o Pokémon, esse Pokémon é exibido na SideBar e o modal de captura desaparece.
- Usuário pode capturar até 6 Pokémons.
- Selecionando qualquer Pokémon na SideBar o usuário pode ver os detalhes do Pokémon.
- O(s) tipo(s) do Pokémon deve ser traduzido (ex: water => Água).
- Usuário pode editar SOMENTE o nome de um Pokémon que foi capturado.
- Na SideBar o usuário tem a possibilidade de criar um Pokémon (um Pokémon pode ter no máximo 2 "tipos").
- O formulário de criação de Pokémon deve conter validações em todos os campos.
- Caso algum campo não esteja preenchido, o botão de criação deve ficar bloqueado.
- Para um Pokémon criado o usuário pode editar qualquer informação ou liberá-lo.
- Sempre que liberar um Pokémon é possível capturar outro através da busca ou criar um customizado.
- Caso as 6 posições estejam ocupadas o usuário não pode mais buscar nem criar novos Pokémons.
- Responsividade para resoluções desktop e mobile. (Ex: 1280 x 720, 360 x 740)
- Todo o seu código deve ser disponibilizado em um repositório público ou privado em seu Github ou Bitbucket pessoal;
- Envie o link para FDTE RH;
- Escolha uma das duas versões abaixo para realizar o teste:
- Versão com sass;
- Versão com styled-components;
- Utilizar a PokéApi para interagir com a aplicação;
- Usar componentes funcionais e hooks;
- Não usar componentes de Class;
- react-redux
- redux
- redux-thunk
- redux-sagas
- axios
- storybook
- eslint
- node-sass
- styled-components
- prettier
- prop-types
- typescript
- react-hook-form
- formik
- yup
- Fique a vontade para mudar a estrutura de como estão os exemplos;
- Muita atenção ao link das issues por que lá estão descritas as tarefas para serem executadas.
- Você pode implementar a aplicação usando typescript, assim como o uso de PropTypes.
- Mesmo a aplicação sendo pequena, o uso do redux está liberado.
- Os componentes devem ser responsivos.
Esperamos que você tenha curiosidade em criar testes para aplicação, mas não se preocupe, isso é opcional
- Teste unitário
- Teste de integração
- Teste de interface
FDTE Copyright © 2020