https://github.com/vs0uz4/aceleradev_spa_contacts_react
SPA - App de Contatos em ReactJS
https://github.com/vs0uz4/aceleradev_spa_contacts_react
api-client codenation nodejs reactjs
Last synced: 3 months ago
JSON representation
SPA - App de Contatos em ReactJS
- Host: GitHub
- URL: https://github.com/vs0uz4/aceleradev_spa_contacts_react
- Owner: vs0uz4
- Created: 2020-05-05T21:21:25.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-16T15:45:05.000Z (about 5 years ago)
- Last Synced: 2025-01-07T21:43:01.504Z (5 months ago)
- Topics: api-client, codenation, nodejs, reactjs
- Language: JavaScript
- Homepage: https://contacts.vsouza.rio.br/
- Size: 4.55 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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: *https://5e82ac6c78337f00160ae496.mockapi.io/api/v1/contacts*
### 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*.
### 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*.
**Preview:**
[Contacts SPA](https://vimeo.com/414869096/55f4293a68)
## Tópicos:
Neste desafio você vai praticar os seus 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](https://nodejs.org/en/)** - ou superior, instalado em seu computador.
* **[Create React App](https://github.com/facebook/create-react-app)**
## Screenshot de Referência
