Este teste é apresentado aos candidatos as vagas de desenvolvimento Front-end para avaliar os quesitos técnicos.

Seu objetivo é criar um simples app que deve conter duas páginas, uma que exibe um formulário com os campos abaixo, e outra que liste os dados cadastrados.

• Nome completo
• CPF
• Telefone
• Email

• Deve ser possível criar, listar e excluir os dados cadastrados pelo formulário;
• Os inputs de texto e botão devem ter a aparência conforme o guia de estilo abaixo (com validações);
• Fazer a persistência dos dados no localStorage ou IndexedDB;
• Não é permitido a utilização de nenhum framework ou o uso de qualquer biblioteca (exceto para testes unitário e tasks de build), recomendado uso de ECMAScript 6+;

Para ter o estado inicial da lista de usuário utilizar este recurso abaixo:

GET https://private-21e8de-rafaellucio.apiary-mock.com/users

Response:

[
  {
    "name": "My name 1",
    "cpf": "04080757247",
    "phone": "11987654321",
    "email": "[email protected]"
  },
  {
    "name": "My name 2",
    "cpf": "77797584192",
    "phone": "11987654321",
    "email": "[email protected]"
  },
  {
    "name": "My name 3",
    "cpf": "45486737688",
    "phone": "11987654321",
    "email": "[email protected]"
  }
]

A partir deste ponto utilizar o localStorage/IndexedDB para persistir localmente as informações.

Save:

{
  "name": "My name 4",
  "cpf": "74668869066",
  "phone": "11987654321",
  "email": "[email protected]"
}

Lista local:

[
  {
    "name": "My name 1",
    "cpf": "04080757247",
    "phone": "11987654321",
    "email": "[email protected]"
  },
  {
    "name": "My name 2",
    "cpf": "77797584192",
    "phone": "11987654321",
    "email": "[email protected]"
  },
  {
    "name": "My name 3",
    "cpf": "45486737688",
    "phone": "11987654321",
    "email": "[email protected]"
  },
  {
    "name": "My name 4",
    "cpf": "74668869066",
    "phone": "11987654321",
    "email": "[email protected]"
  }
]

• A página ser responsiva;
• Permitir edição;
• Uso de pré-processador css;
• Testes End to End;

• Testes, no mínimo testes unitários;
• Padrão de Projeto e boas práticas de Orientação a Objetos;
• Utilizar ECMAScript 6+;
• Criar um passo a passo de como rodar sua aplicação (Sugestão);
• Criar uma breve descrição da solução utilizada.

• Cor da fonte sem foco: #efeeed.
• Cor da fonte com foco: #333333.
• Cor da borda: #efeeed.

• Cor da fonte: #eb4a46.
• Cor da borda: #eb4a46.

• Cor da fonte com foco: #ffffff.
• Cor de background: #00c8b3.

• Opacidade do botão com hover: 70%.

• Cor da fonte sem foco: #dddcdc.
• Cor de background: #f6f6f6.

*Criar animação de loading ao clicar no submit

** Use sua criatividade para criar a página para listar os dados cadastrados **