https://github.com/thiagomartins367/trybe-project-starwars-planets-search

Projeto de desenvolvimento de uma tabela com filtros de planetas do universo de Star Wars usando Context API e React Hooks para controlar os estados globais. ⚫ 🤖 ⚔️ 🧑
https://github.com/thiagomartins367/trybe-project-starwars-planets-search

context-api css3 javascript jsx reatctjs

Last synced: 3 days ago
JSON representation

Projeto de desenvolvimento de uma tabela com filtros de planetas do universo de Star Wars usando Context API e React Hooks para controlar os estados globais. ⚫ 🤖 ⚔️ 🧑

• Host: GitHub
• URL: https://github.com/thiagomartins367/trybe-project-starwars-planets-search
• Owner: thiagomartins367
• Created: 2022-02-28T22:33:47.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-24T21:11:38.000Z (almost 2 years ago)
• Last Synced: 2024-11-09T20:26:56.848Z (about 2 months ago)
• Topics: context-api, css3, javascript, jsx, reatctjs
• Language: JavaScript
• Homepage: https://thiagomartins367.github.io/Trybe-project-starwars-planets-search
• Size: 6.34 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Descrição

Este projeto foi desenvolvido durante o período de Curso da Trybe 🚀

O projeto tem por objetivo a avaliação e prática dos conhecimentos adquiridos na Trybe, visando o cumprimento do requisitos solicitados pela mesma.

### *ATENÇÃO: Para utilizar a aplicação acesse o link no canto direito em "About"*.

![img](projectIntro.gif)

---

# Sumário

- [Descrição](#descrição)

- [Habilidades](#habilidades-requeridas)

- [O que foi desenvolvido](#o-que-foi-desenvolvido)

- [Tecnologias usadas](#tecnologias-usadas)

- [ANTES DE INICIALIZAR A APLICAÇÃO](#antes-de-inicializar-a-aplicação)

- [Linter](#linter)

- [Desmontração de Uso](#desmontração-de-uso)

---

## Habilidades requeridas

* Utilizar a _Context API_ do **React** para gerenciar estado.

* Utilizar o _React Hook useState_;

* Utilizar o _React Hook useContext_;

* Utilizar o _React Hook useEffect_;

* Criar _React Hooks_ customizados.

---

## O que foi desenvolvido

Foi implementado uma lista com filtros de planetas do universo de Star Wars usando **Context API e Hooks**, do React, para controlar os estados globais.

---

## Tecnologias usadas

- `javascript` , `jsx` , `React` , `ContextAPI` e `css`.

---

## ANTES DE INICIALIZAR A APLICAÇÃO

1. Clone o repositório

  * `git clone [email protected]:THIAGOMARTINS367/Trybe-project-starwars-planets-search.git`

  * Entre na pasta do repositório que você acabou de clonar:

    * `cd Trybe-project-starwars-planets-search`

2. Instale as dependências e inicialize o projeto

  * Instale as dependências:

    * `npm install`

  * Inicialize o projeto:

    * `npm start` (uma nova página deve abrir no seu navegador com a lista de planetas)

    * ⚠️ Lembrando que já deve se estar dentro da pasta do projeto `Trybe-project-starwars-planets-search`

---

## Linter

Para garantir a qualidade do código de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento foi utilizado neste projeto o linter `ESLint` e o `Stylelint`. Para rodar o linter localmente, execute o comando abaixo:

```bash

npm run lint

npm run lint:styles

```

---

## Desmontração de Uso

### Buscando pelo Nome do Planeta

![img](demonstration-1.gif)

---

### Filtrando pelo valor da coluna

![img](demonstration-2.gif)

---

### Usando filtros em conjuntos

![img](demonstration-3.gif)

---

### Testando quantidade de filtros disponíves

![img](demonstration-4.gif)

---

### Removendo filtros ativos

![img](demonstration-5.gif)

---

### Ordenando colunas de forma Ascendente e Descendente

![img](demonstration-6.gif)