Teste front-end

Teste aos candidatos as vagas de desenvolvimento Front-end da UpperSoft.

Deploy

https://uppersoft-remix.netlify.app/

Objetivo

Simular uma aplicação que consiste em gerenciar usuários de um sistema.

Não será necessário qualquer tipo de validação de acesso ou outros tipos de tratamento, o propósito é simplesmente avaliar a capacidade de desenvolvimento das duas telas propostas com as respectivas integrações.

Ao final será possível apresentar suas habilidades com HTML, CSS, JavaScript, NPM/YARN e integração com APIs.

Desafio

Serão duas telas que, juntas, simulam o acesso a um sistema de gerenciamento de usuários.

Layout

CLIQUE AQUI PARA VISUALIZAR AS TELAS, CORES E FONTES UTILIZADAS

Login: Tela contendo cabeçalho, com logo da empresa, e um box com: título, campos de E-mail e Senha e botão de acesso.
Lista de Usuários: Tela contendo cabeçalho, título, lista em coluna contendo 6 cards com as informações do usuário (foto, nome, email e botão de editar) e informação de quantos usuários estão sendo mostrados e a quantidade total.

Todos assets, incluindo as telas do link acima, estão dentro da pasta assets.

Font:
- Nome: Helvetica Neue (Bold e Medium)
- Title - Primary [LG]: HelveticaNeue, Bold, 48px
- Title - Primary: HelveticaNeue, Bold, 32px
- Content - Gray [LG]: HelveticaNeue, Medium, 22px
- Content - Primary: HelveticaNeue, Medium, 16px
- Content - Gray: HelveticaNeue, Medium, 16px
Cores utilizadas:
- Primary: #174DBA
- Gray: #EFF0F3
- White: #FFFFFF
- Dark: #505050

Pré-requisitos

Deverá ser apresentado dois arquivos HTML (index.html e lista-usuarios.html) e demais arquivos de assets.
O header (barra superior azul com a logo) deverá ser fixa no topo da tela quando houver scroll.
A tela deverá ser responsiva (desktop e mobile), ajustando o conteúdo conforme o tamanho da tela.
Deve ser possível inserir o E-mail e Senha e, após clicar no botão, uma request deverá ser enviada para a API de login, após o response da API deverá haver o direcionamento para a tela de Lista de Usuários.
Deve ser possível visualizar a lista com os primeiros 6 usuários que a API fake retornar.
Deve ser possível visualizar quantos usuários estão sendo mostrados e o total de usuários.
O botão de editar, no card de usuário na tela de Lista de Usuários, não precisa executar nenhuma ação, mas deve existir em forma de botão.
Não deve ser utilizado nenhum framework de front-end ou estilo (Bootstrap, Tailwind, Vue.js, React ou outros).
Não deve ser utilizado CDN para qualquer tipo de biblioteca utilizada.
Para simulação dos dados de usuário e login deve ser utilizada a API fake https://reqres.in/, dados para integração abaixo e informações sobre a API no link.

Integração com API

Login

Deve ser feita uma request POST para a rota https://reqres.in/api/login com o body contendo os dados de e-mail e senha informados no formulário. Enquanto a request é feita o usuário deve aguardar na página. Após ser finalizada ele deve ser direcionado para a tela de Lista de Usuários.

Exemplo do body da requisição:

	{
	    "email": "email@uppersoft.com.br",
	    "password": "senha"
    }

Lista de Usuário

Deve ser feita uma request GET para a rota https://reqres.in/api/users?page=1 e os dados da resposta devem ser mostrados na tela da seguinte maneira:

A lista de usuários deve ser os dados contido no data.
Texto informativo na parte inferior deve utilizar o total e per_page.

Exemplo de resposta da API:

{
   "page":1,
   "per_page":6,
   "total":12,
   "total_pages":2,
   "data":[
      {
         "id":1,
         "email":"george.bluth@reqres.in",
         "first_name":"George",
         "last_name":"Bluth",
         "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
      },
      {
         "id":2,
         "email":"janet.weaver@reqres.in",
         "first_name":"Janet",
         "last_name":"Weaver",
         "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
      },
      {
         "id":3,
         "email":"emma.wong@reqres.in",
         "first_name":"Emma",
         "last_name":"Wong",
         "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
      },
      {
         "id":4,
         "email":"eve.holt@reqres.in",
         "first_name":"Eve",
         "last_name":"Holt",
         "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
      },
      {
         "id":5,
         "email":"charles.morris@reqres.in",
         "first_name":"Charles",
         "last_name":"Morris",
         "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
      },
      {
         "id":6,
         "email":"tracey.ramos@reqres.in",
         "first_name":"Tracey",
         "last_name":"Ramos",
         "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
      }
   ],
   "ad":{
      "company":"StatusCode Weekly",
      "url":"http://statuscode.org/",
      "text":"A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things."
   }
}

Para maiores informações sobre como integrar com a API e exemplos de utilização acesse o site da API.

Plus

Utilização de NPM/Yarn para instalação de bibliotecas.
Utilização de pré-processador de CSS (SASS/SCSS)
Utilização do Axios para as requests.
Utilização dos arquivos SVGs disponibilizados nos assets.
Utilização de SessionStorage para armazenar o token recebido no login e permitir o acesso a tela de Lista de Usuários somente se houver token na SessionStorage.
Loading enquanto aguarda resposta da API.

Como fazer

Você deverá criar um fork desse projeto e realizar todo o desenvolvimento em seu repositório, ao final deve nos enviar o link para que seja feita a validação.

maxassis/Uppersoft-Remix