O desafio consiste em implementar uma aplicação client-side, que rode de forma consistente nos navegadores mais recentes e que seja responsiva para melhor visualização em dispositivos móveis.
Baseado no Layout, desenvolva uma página web que exibe informações de usuários.
Premissas:
- Ao carregar a página, as informações exibidas devem ser as suas próprias informações pessoais.
- Ao clicar no botão 'try the next one', a página deve chamar uma API (disponível no link abaixo) que retorna dados de usuários randômicos e exibi-los na tela.
- Ao clicar no botão 'Follow' a página deve armazenar essa informação. Caso o mesmo usuário seja exibido novamente o botão deve aparecer como 'Following' e com cor diferente
- Ao seguir um usuário, deverá ser exibido um link na parte superior direita da página (Layout)
- Ao clicar no link, uma lista com os usuários seguidos deve ser exibida (Layout)
- Ao navegar entre os usuários (via 'try the next one'), os usuários que NÃO forem seguidos devem aparecer na lista de sugestões (Exemplo com 1) (Exemplo com vários). Guarde essas informações no Browser, para que quando a página for acessada novamente ou recarregada, já exista sugestões iniciais.
Note que o Layout e as premissas não deixam claro todas as situações possíveis para os dados do usuário. Você pode interpretar como quiser o que não foi definido como premissa e melhorar a funcionalidade da página, caso ache necessário.
Recomendações:
- Utilize a versão mais recente do Angular (https://angular.io/)
- Utilize a versão mais recente do Bootstrap (https://getbootstrap.com/)
- Atente-se a resposividade da tela (principalmente no formato mobile)
Layout 1 Layout 2 Layout 3 Layout 4
Link da API.
*a Api pode demorar pra responder ou ficar fora do ar em alguns momentos (pense nisso quando for desenvolver).
Preparado? Crie um fork desse repositório, quando finalizar, envie o link para o seu contato na B2W ;)