https://github.com/walissonrodrigo/contacts-aceleradev-react

Desafio do AceleraDEV React da Codenation onde foi desenvolvido um SPA (Single Page Application) de uma lista de contatos em React
https://github.com/walissonrodrigo/contacts-aceleradev-react

aceleradev codenation react spa

Last synced: 13 days ago
JSON representation

Desafio do AceleraDEV React da Codenation onde foi desenvolvido um SPA (Single Page Application) de uma lista de contatos em React

• Host: GitHub
• URL: https://github.com/walissonrodrigo/contacts-aceleradev-react
• Owner: WalissonRodrigo
• License: mit
• Created: 2020-05-21T00:39:50.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-12T04:12:11.000Z (over 1 year ago)
• Last Synced: 2024-12-01T12:14:28.598Z (2 months ago)
• Topics: aceleradev, codenation, react, spa
• Language: JavaScript
• Homepage:
• Size: 5.16 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SPA: App de Contatos

[![Netlify Status](https://api.netlify.com/api/v1/badges/8b291ca9-82b3-4ca6-808f-9ab20d7d502a/deploy-status)](https://app.netlify.com/sites/contatos-spa-acelera-dev-react/deploys)

## 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](https://nodejs.org/en/)** - ou superior, instalado em seu computador.

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

## Screenshot de Referência

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