/desafio-api

SPA: App de contatos

Primary LanguageJavaScript

SPA: App de Contatos

Objetivo:

O desafio é desenvolver um SPA (Single Page Application) de uma lista de contatos em React com as seguintes funcionalidades:

  • Consumir os dados de contato através de uma API Rest, usando a Fetch API do Javascript.
  • Busca de um contato aplicando filtro em tempo real.
  • Aplicar filtros de ordenação por Nome, País, Empresa, Departamento e Data de Admissão.

API de Contatos:

GET: http://5e82ac6c78337f00160ae496.mockapi.io/api/v1/contacts

Requisitos:

  • Crie uma pasta components e crie os componentes .jsx e seus respectivos estilos .scss.
  • Faça a composição dos componentes no arquivo App.jsx.
  • Crie os estados do SPA.
  • Consuma a API de contatos no ciclo de vida correto do componente`.
  • Implemente a busca para filtrar os contatos em tempo real.
  • Implemente os filtros de ordenação por Nome, País, Empresa, Departamento e Data de Admissão.

Dicas:

  • Tudo pode ser resolvido em um único componente.
  • O estado será mais complexo, ou seja, terá várias entradas.

Iniciar o projeto:

  • Instale as dependências do projeto com o comando yarn install ou npm install.
  • Inicie o projeto com comando yarn start ou npm start / npm run start.

Preview: 👉 Instagram Codenation

Tópicos:

Neste desafio você vai praticar os seus conhecimentos em:

  • React
  • Modularização
  • Fetch API
  • JS: Array.map, Array.filter, Array.reduce, Array.find, Array.sort

Requisitos:

Screenshot de Referência