{"id":23119037,"url":"https://github.com/vbss-io/star-wars-datatable","last_synced_at":"2026-04-16T05:33:59.471Z","repository":{"id":244780904,"uuid":"504843079","full_name":"vbss-io/star-wars-datatable","owner":"vbss-io","description":"Aplicação React consumindo uma API de planetas da franquia Star Wars, podendo aplicar busca por nome, filtros e ordenação.","archived":false,"fork":false,"pushed_at":"2022-08-23T17:13:07.000Z","size":2367,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T02:32:15.935Z","etag":null,"topics":["bootstrap","context-api","datatable","fetch-api","react","react-bootstrap","react-hooks","reactjs","starwars","trybe","trybe-projects"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vbss-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-18T12:52:16.000Z","updated_at":"2024-11-19T11:27:39.000Z","dependencies_parsed_at":"2024-06-17T12:18:36.014Z","dependency_job_id":"e9d17a5a-561a-461d-80b4-786fab1f6773","html_url":"https://github.com/vbss-io/star-wars-datatable","commit_stats":null,"previous_names":["vitorbss12/starwars-react-datatable","vbss-io/star-wars-datatable"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vbss-io/star-wars-datatable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Fstar-wars-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Fstar-wars-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Fstar-wars-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Fstar-wars-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vbss-io","download_url":"https://codeload.github.com/vbss-io/star-wars-datatable/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Fstar-wars-datatable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31872654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","context-api","datatable","fetch-api","react","react-bootstrap","react-hooks","reactjs","starwars","trybe","trybe-projects"],"created_at":"2024-12-17T05:31:18.938Z","updated_at":"2026-04-16T05:33:59.452Z","avatar_url":"https://github.com/vbss-io.png","language":"JavaScript","readme":"# Star Wars DataTable - React, Context API e Bootstrap\n\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_StarWars-React-DataTable\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vitorbss12_StarWars-React-DataTable)\n[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_StarWars-React-DataTable\u0026metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=vitorbss12_StarWars-React-DataTable)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_StarWars-React-DataTable\u0026metric=security_rating)](https://sonarcloud.io/summary/new_code?id=vitorbss12_StarWars-React-DataTable)\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_StarWars-React-DataTable\u0026metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=vitorbss12_StarWars-React-DataTable)\n\nStar Wars DataTable é uma aplicação com informações sobre os planetas da famosa franquia de Star Wars, consumindo uma API disponibilizada pela [Trybe](https://www.betrybe.com/) é possível ver os planetas listados em uma tabela, também é possível fazer buscas, aplicar filtros e ordenar os dados. A aplicação foi desenvolvida utilizando React e seus componentes funcionais, Context API, hooks customizados e parte da estilização é feita com React Bootstrap.\n\nÉ possível testar a aplicação aqui: [Star Wars DataTable](https://vitorbss12.github.io/StarWars-React-DataTable/) \n\n![pixelArtDemo](./src/projectIntro.gif)\n\n## Conteúdo\n\n- [Star Wars DataTable - React, Context API e Bootstrap](#star-wars-datatable---react-context-api-e-bootstrap)\n  - [Conteúdo](#conteúdo)\n- [**Recursos Star Wars Data Table**](#recursos-star-wars-data-table)\n    - [**Apresentação**](#apresentação)\n    - [**Menu Inicial**](#menu-inicial)\n    - [**Filtragem e Ordenação**](#filtragem-e-ordenação)\n      - [**Filtrar Planetas**](#filtrar-planetas)\n      - [**Ordenar Planetas**](#ordenar-planetas)\n      - [**Filtros Aplicados**](#filtros-aplicados)\n    - [**Tabela**](#tabela)\n- [**Instruções**](#instruções)\n    - [**Instalação**](#instalação)\n    - [**Execução**](#execução)\n- [**Linguagens e Ferramentas**](#linguagens-e-ferramentas)\n    - [**React**](#react)\n    - [**React Hooks**](#react-hooks)\n    - [**Context API**](#context-api)\n    - [**Bootstrap**](#bootstrap)\n    - [**Planets List API - Trybe**](#planets-list-api---trybe)\n    - [**Linter**](#linter)\n- [**Observações**](#observações)\n\n# **Recursos Star Wars Data Table**\n\n### **Apresentação**\n\nA tela inicial da aplicação é responsiva e ocupa 100% do espaço disponível no navegador, possui um botão ancorado a parte funcional da tabela de planetas.\n\n![Apresentação](./readme-images/apresentacao.PNG)\n\n### **Menu Inicial**\n\nO menu inicial é composto pelo título da aplicação, uma barra de busca capaz de filtrar os planetas por nome e um botão para expandir os filtros e ordenações disponíveis, esse botão não oculta filtros já aplicados.\n\n![Menu Inicial](./readme-images/menu-inicial.PNG)\n\n### **Filtragem e Ordenação**\n\nÉ possível filtrar e e gerenciar filtros já aplicados na tabela, assim como ordenar de forma crescente ou decrescente.\n\n![Filtragem e Ordenação](./readme-images/filtros-ordem.PNG)\n\n#### **Filtrar Planetas**\n\nAs opções de filtro são de acordo com as colunas disponíveis na tabela (período orbital, diâmetro, período de rotação, água da superfície e população), um operador (maior que, menor que e igual a) e o valor desejado.\nApenas um filtro por coluna pode ser aplicado por vez.\n\n#### **Ordenar Planetas**\n\nA ordenação pode ser feita com base nas mesmas colunas disponíveis para os filtros e com opção de ordem ascendente ou descendente.\n\n#### **Filtros Aplicados**\n\nO menu de filtros aplicados só é visível quando existe mais de um filtro selecionado, é possível aplicar até 3 filtros utilizando colunas distintas. Os botões permitem excluir filtros específicos ou todos de uma vez.\n\n![Filtros Aplicados](./readme-images/filtros-aplicados.PNG)\n\n### **Tabela**\n\nA tabela contém os planetas recebidos pela API e é dinâmica de acordo com as configurações de filtragem e ordenação. Foi desenvolvida utilizando Bootstrap se mantendo responsiva de acordo com o tamanho do dispositivo.\n\n![Tabela](./readme-images/tabela.PNG)\n\u003cb\u003eDemo Tabela\u003c/b\u003e\n\n# **Instruções**\n\n### **Instalação**\n\nPara rodar a aplicação localmente é necessário fazer a instalação das dependências utilizadas com o comando:\n\n```\nnpm install\n```\n### **Execução**\n\nDepois de ter as dependências instaladas é possível executar o projeto localmente com o comando:\n\n```\nnpm start\n```\n\n# **Linguagens e Ferramentas**\n\n`React` é o coração da aplicação, foi desenvolvida utilizando componentes funcionais, `Hooks` disponíveis pelo React e também customizados, o estado da aplicação foi gerido utilizando `Context API` e a estilização foi feita com `Bootstrap` e `CSS`\n\n### **React**\n\nA aplicação foi componentizada utilizando `React`, divido em:\n- **StarWarsData:** Onde todos os componentes são agrupados.\n- **Header:** Responsável pela visualização inicial.\n- **TextInput:** Capaz de fazer a filtragem de planetas pelo nome.\n- **NumbersInputs:** Onde são gerenciadas as opções de filtragem.\n- **SortInputs:** Opções de ordenação.\n- **AppliedFilters:** Filtros aplicados e opções de exclusão.\n- **Table:** Exibição da tabela dinamicamente.\n\n### **React Hooks**\n\nOs principais hooks utilizados na aplicação foram `useState` e `useContext` (a seguir), também foi desenvolvido hooks customizados, sendo eles:\n  - **useFetchAPI:** Responsável por fazer a requisição ao endpoint da API.\n  - **useFilterPlanets:** Efetuando a filtragem dos planetas e guardando no contexto da aplicação.\n  - **useSortPlanets:** Efetuando a ordenação dos planetas e guardando no contexto da aplicação.\n\n### **Context API**\n\n`Context API` ficou responsável pelo estado global da aplicação utilizando o StarWarsContext para gerenciar alterações na busca por nome, filtros e ordenação aplicados. Faz também a verificação de possíveis erros na requisição da API e o loading da requisição.\n\n### **Bootstrap**\n\nA aplicação teve parte da estilização feita em `CSS`, mas para manter uma boa responsividade o `Bootstrap` foi escolhido. Containers, Linhas e Colunas são importadas da biblioteca pra manter um layout mais organizado, assim com animações de loadings, alguns botões e principalmente a tabela, que se comporta de forma responsiva.\n\n### **Planets List API - Trybe**\n\nO consumo da api foi feito por apenas um endpoint dentro do hook customizado useFetchApi, com retorno de todos os planetas disponíveis, e a partir dessa requisição a aplicação gerencia os planetas que devem ser exibidos na tabela.\n\nEndpoint Utilizado:\n```\nhttps://swapi-trybe.herokuapp.com/api/planets/\n```\n\n### **Linter**\n\nEste projeto foi desenvolvido utilizando o linter `ESLint` seguindo as boas práticas definidas na [Trybe](https://www.betrybe.com/).\n\nPara executar o Lint utilize o comando:\n````\nnpm run lint\n````\n\nPara executar o styleLint utilize o comando:\n````\nnpm run lint:styles\n````\n\n# **Observações**\n\n- Este é um projeto de estudo desenvolvido durante minha formação na [Trybe](https://www.betrybe.com/). :rocket:\n\n- Este repositório está sendo monitorado pelo [SonarCloud](https://sonarcloud.io/) para avaliação de qualidade.\n\n- O deploy dessa aplicação foi feito utilizando [GitHub Pages](https://pages.github.com/)\n\n- Quer saber mais sobre mim? Veja o meu [LinkedIn](https://www.linkedin.com/in/vitorbss/).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvbss-io%2Fstar-wars-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvbss-io%2Fstar-wars-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvbss-io%2Fstar-wars-datatable/lists"}