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.
Resultado do projeto abaixo:
Regras
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)
Links do layout e API
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).
- Clone o repositório com o comando:
git clone git@github.com:jonatasqueirozlima/b2w-challenge-front-BIT.git; - Entre na pasta do repositório:
cd b2w-challenge-front-BIT - Inicie a aplicação com o comando:
docker-compose up -d --build
- Acessar a seguinte URL:
http://localhost:3000/
- 🗡️ Problemas em componentes que precisavam da informação do perfil mas a requisição ainda não havia terminado para prover esse dado. E os componentes 'quebravam'
- 🛡️ Background com duas cores em apenas uma linha de CSS.
- 🥊 Deixar idêntico ao layout proposto.
- ⚔️ Usar Tailwind sem deixar as tags longas com muitas classes.
Desafiador e divertido quando o desafio já tem um layout e design proposto e é para segui-lo
Gostei do desafio, foi legal desenvolver o sistema de seguidores e sugestão de seguidores e renderizar informações de um usuário de uma API que é focada em retornar perfil de usuários
- Testes unitários e integração de Frontend
- Refatorar código para melhorar a componentização
- Usar Styled Components com Tailwind para melhorar a leitura do componente no
return