/personagens_star_wars

šŸŒŒ Utilizando a API SWAPI e ReactJS, consta em uma interface que lista personagens do universo de Star Wars.

Primary LanguageJavaScript

Star Wars Characters - React.js

Este Ʃ um projeto React.js que utiliza a API SWAPI (https://swapi.dev/) para listar os personagens de Star Wars. A interface construƭda permite visualizar os personagens, filtrar pelo nome e navegar entre as pƔginas.

Recursos

A aplicaĆ§Ć£o oferece os seguintes recursos:

  • Lista os personagens da API SWAPI em grade.
  • Filtrar os personagens pelo nome.
  • PaginaĆ§Ć£o dos resultados, exibindo 10 registros por vez.
  • BotƵes de navegaĆ§Ć£o para alternar entre as pĆ”ginas.

Tecnologias Utilizadas

A aplicaĆ§Ć£o Ć© desenvolvida utilizando as seguintes tecnologias:

  • React.js: Biblioteca JavaScript para construĆ§Ć£o de interfaces de usuĆ”rio.
  • Axios: Biblioteca para fazer chamadas HTTP para a API SWAPI.
  • Styled Components: Biblioteca para estilizaĆ§Ć£o de componentes React.
  • Skeleton: Biblioteca para criar animaƧƵes de carregamento.

PrƩ-requisitos

  • Node.js.
  • NPM (gerenciador de pacotes do Node.js).

Como utilizar

  1. Clone o repositĆ³rio para o seu ambiente local.
  2. Tenha o node instalado em sua mƔquina.
  3. Execute o comando npm install para instalar as dependĆŖncias do projeto.
  4. Execute o comando npm run dev para iniciar o servidor local.
  5. Acesse o endereƧo local no seu navegador.
  6. Na pĆ”gina, vocĆŖ verĆ” a lista de personagens de Star Wars. Utilize o campo de busca para filtrar os personagens pelo nome. A cada 10 personagens exibidos, haverĆ” botƵes de paginaĆ§Ć£o para navegar entre as pĆ”ginas.

Estrutura de Pastas

  • images: Imagens utilizadas no README.md.
  • src: Arquivos da aplicaĆ§Ć£o.
  • components: Componentes React.
  • pages: PĆ”ginas React.
  • providers: ServiƧos de acesso Ć  API.
  • services: Getters de dados.
  • styles: Estilos globais da aplicaĆ§Ć£o.
  • utils: FunƧƵes utilitĆ”rias.

Autor

Esta aplicaĆ§Ć£o foi desenvolvida por Juathan Coelho Duarte. Entre em contato pelo e-mail juathanduarte13@gmail.com para mais informaƧƵes.