SPA: App de Contatos

Objetivo:

Desafio do AceleraDEV React da Codenation onde foi desenvolvido 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: https://5e82ac6c78337f00160ae496.mockapi.io/api/v1/contacts

Requisitos

• Modularize os componentes na pasta components.
• Atualize os arquivos de componentes carregando corretamente seus estilos e suas marcações 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, será um objeto com múltiplas propriedades.

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.

Tópicos:

Neste desafio foi abordado os seguintes conhecimentos em:

• React
• React - Ciclo de vida de componentes
• Modularização
• Fetch API
• JS: Array.map, Array.filter, Array.reduce, Array.find, Array.sort

Requisitos:

• Node v13.8.0 - ou superior, instalado em seu computador.
• Create React App

Screenshot de Referência