https://github.com/valchanoficial/contactspa

Codenation - SPA: App de Contatos
https://github.com/valchanoficial/contactspa

fetch hooks react reactjs spa

Last synced: 4 days ago
JSON representation

Codenation - SPA: App de Contatos

• Host: GitHub
• URL: https://github.com/valchanoficial/contactspa
• Owner: ValchanOficial
• Created: 2020-05-06T01:51:31.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-02-10T22:17:10.000Z (almost 3 years ago)
• Last Synced: 2023-03-04T06:56:51.553Z (over 1 year ago)
• Topics: fetch, hooks, react, reactjs, spa
• Language: JavaScript
• Homepage: https://valchan-contact-spa.netlify.app/
• Size: 4.75 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Codenation - SPA: App de Contatos

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/d78f4080beab4d20ae127991f7f890c1)](https://app.codacy.com/manual/valeria_padilha/ContactSPA?utm_source=github.com&utm_medium=referral&utm_content=ValchanOficial/ContactSPA&utm_campaign=Badge_Grade_Dashboard)

[![Netlify Status](https://api.netlify.com/api/v1/badges/55853d55-b16f-44ff-9bc6-d6ec1bec19cb/deploy-status)](https://app.netlify.com/sites/valchan-contact-spa/deploys)

## 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: [Contacts API](https://5e82ac6c78337f00160ae496.mockapi.io/api/v1/contacts)

### Requisitos - Parte 1

 -  Modularize os componentes na pasta components.

 -  Atualize os arquivos de componentes carregando corretamente seus estilos e suas marcações JSX.

### Requisitos - Parte 2

 -  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*.

### 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*.

## Requisitos

 -  **[Node v13.8.0](https://nodejs.org/en/)** - ou superior, instalado em seu computador.

 -  **[Create React App](https://github.com/facebook/create-react-app)**

## Screenshot de Referência

![Codenation Challenge](https://codenation-challenges.s3-us-west-1.amazonaws.com/react-14/screenshot.png)