Skip to content

AnaliceMarques/projeto-react-apis

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Projeto React e API's

O Projeto React e APIs é um site de pokémons que possui três páginas: Home, Pokedex e Detalhes.

Este projeto tem como fonte de dados para a sua criação a Poke Api, uma Api pública, muito utilizada para aplicações focadas em aprendizado de programação.

Funcionalidades do Projeto

  • Página inicial com uma lista de 30 Pokémons, ordenados pelo número do id e no Header terá um botão para acessar a página da Pokédex;
  • Cada Pokémon é representado por um card, contendo id, nome, tipo, e imagem do Pokémon;
  • Cada card tem um botão para acessar os detalhes do Pokémon e outro de adicionar ou remover na Pokédex (dependendo se o Pokémon está ou não na Pokédex);
  • Os Pokémons que forem adicionados na Pokédex são removidos da lista da página inicial e retornarão caso sejam removidos da Pokédex;
  • Na página Pokédex será renderizado os cards dos Pokémons que foram adicionados na Pokédex, ordenados pelo número do id e no Header terá um botão para voltar para a Home;
  • Na página de Detalhes será renderizado um card com as informações do Pokémon selecionado e no Header terá um botão um botão para adicionar ou remover da Pokédex (dependendo se o Pokémon está ou não na Pokédex) e outro para voltar a página Home;
  • Se o Pokémon já está na Pokédex não é possível adiciona-lo novamente.

Link de Acesso

Tecnologias Utilizadas

  1. React (React.JS, React Context, Estado Global e Custom Hooks )
  2. React Router
  3. Axios
  4. Chakra UI

Como rodar este projeto?

# Clone este repositório
$ git clone https://github.com/AnaliceMarques/projeto-react-apis.git

# Acesse a pasta do projeto no seu terminal
$ cd projeto-react-apis

# Instale as dependências
$ npm install

# Execute a aplicação
$ npm run start

# A aplicação será iniciada na porta 3000, acesse pelo navegador: http://localhost:3000

Próximos passos

  • Inserir mais Pokémons na página inicial, através de paginação;
  • Armazenar os Pokémons que estão na Pokédex no localStorage;
  • Deixar o site responsivo para tablet e mobile.

Contato

analicemarquessl@gmail.com

LinkedIn

About

Ultimo projeto do modulo 2 - Front

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 93.8%
  • HTML 6.2%