Projeto Pokedex LidiaYamamura

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,43 +1,78 @@
-# **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. O projeto está subdivido em temas de acordo com os conteúdos que estudado durante o Módulo 2 - Frontend.
+#  - Lidia Yamamura - 
+### Veja o site: 
+<img src='./src/assets/favicon.ico' alt='pokebola' style='width: 20px'> [**Pokédex** - pelo vercel](https://pokeapi.co/ "Poke Api")
+<br>
+<br>
 
-Este projeto terá como fonte de dados para a sua criação a [Poke Api](https://pokeapi.co/ "Poke Api"), uma Api pública, muito usada para aplicações focadas em aprendizado de programação e também usada em cases de processos seletivos.
+# Projeto React e API's
+O Projeto React e APIs é um site de pokémons que possui três páginas principais: <a href='#home'> Home, </a><a href='#pokedex'>Pokédex, </a><a href='#detalhes'>Detalhes</a>.
 
-Os conteúdos principais  a serem estudados são:
+Este projeto teve como fonte de dados para a sua criação a [Poke Api](https://pokeapi.co/ "Poke Api").
+<br>
+<br>
 
-- Integração de APIs
-- React Router
-- Design Systems
-- Estado Global
-
-## **Enunciado**
-É objetivo deste projeto criar um site com três páginas usando a Poke Api com as seguintes ferramentas:
+## **Tecnologias Utilizadas:**
 
 - React
 - React Router
-- Styled-components
 - React Context
-- Axios
+- Criação de hooks
+- Integração de APIs - Axios
+- Design Systems -  [Chakra](https://chakra-ui.com/ "Chakra UI")
+- Local Storage
+- Responsividade
+
+<br>
 
-### **Requisitos**
+# <img src='./src/assets/favicon.ico' alt='pokebola' style='width: 30px'> **Pokedéx**
+O projeto consiste em:
 - **Gerais:**
-	- [ ] O site deve ter 3 páginas: Home, Pokedex e Detalhes;
-	- [ ] Projeto deve seguir o [design](https://www.figma.com/file/KseyA2Ofghiek2Cy3ZaDre/Poked%C3%A9x?t=AEi3zEmWmarf1FbP-0 "design") proposto;
-	- [ ] O fluxo de trocas de páginas devem ser semelhante ao [fluxograma](https://www.figma.com/proto/KseyA2Ofghiek2Cy3ZaDre/Poked%C3%A9x?page-id=0%3A1&node-id=2%3A2&viewport=358%2C197%2C0.27&scaling=scale-down&starting-point-node-id=2%3A2 "fluxograma");
-- **Página Home:**
-	- [ ]  Mostrar uma lista de Pokemons, contendo ao menos 20 Pokemons;
-	- [ ] Cada Pokemon será representado por um Card;
-	- [ ] Em cada card de Pokemon tem um botão para adicioná-lo à Pokedex e um outro botão para acessar os detalhes do Pokemon;
-	- [ ] Header dessa página terá um botão para acessar a página da Pokedex
-- **Página Pokédex**
-	- [ ] Renderizar a lista de pokémons adicionados na pokedex;
-	- [ ] Em cada card de Pokemon deve ter um botão para removê-lo da Pokedex e um outro botão para acessar os detalhes do Pokemon.
-	- [ ] Header deve ter um botão para voltar para a Home
-	- [ ] Não deve ser possível adicionar o mesmo Pokemon duas vezes na Pokedex
-- **Página de Detalhes**
-	- [ ] Mostrar os detalhes do Pokemon selecionado, com informações descritas
-	- [ ] Header deve ter um botão para adicionar ou remover da Pokedex e outro para voltar a página home.
-- [ ] [Criar um readme](https://www.youtube.com/watch?v=1QKwP0SJK-c "Crie um readme") para o projeto;
+	- O site tem 3 páginas principais: Home, Pokédex e Detalhes;
+	- Contém uma página de <a href='#detalhes'>erro</a> que é redirecionado caso ocorra um erro.	
+	- O projeto segue o [design](https://www.figma.com/file/KseyA2Ofghiek2Cy3ZaDre/Poked%C3%A9x?t=AEi3zEmWmarf1FbP-0 "design") proposto;
+	- O fluxo de trocas de páginas é semelhante ao [fluxograma](https://www.figma.com/proto/KseyA2Ofghiek2Cy3ZaDre/Poked%C3%A9x?page-id=0%3A1&node-id=2%3A2&viewport=358%2C197%2C0.27&scaling=scale-down&starting-point-node-id=2%3A2 "fluxograma");	
+	- **Atenção!!** Como as páginas foram criadas pensando na responsividade, dependendo do tamanho da tela, o design muda um pouco.
+<br>
+<br>
+- <a name="home"><b>Página Home: </a>
+	- Cada Pokémon é representado por um Card;
+	- Contém uma lista de Pokémons, que dependendo do tamanho na tela, muda a quantidade de cards mostrados em cada página;
+	- Em cada card contém  um botão para tentar capturar o Pokémon que o adiciona a sua Pokédex e outro para acessar os detalhes do Pokémon;
+	- Contém 2 filtros, onde é possível filtrar pelo tipo do Pokémon e no outro ordená-los na ordem Crescente ou Decrescente de acordo com os nomes de cada um;
+	- No Header tem um input de busca pelo nome e um botão para acessar a página da Pokédex, para telas menores, como no celular, o Botão para acessar a Pokedéx e o input de busca, se encontram mais abaixo da página;
+	- No Header tem um botão para mudar o tema de claro para escuro;
+	- Quando um Pokémon é capturado, o card é retirado da Home e passa para a página da Pokédex;
+	- **Atenção!!** Foi adicionado uma chance de captura para cada Pokémon, a chance foi baseada no 'capture rate' de cada Pokémon contido na API.
+<br>
+<br>
+- <a name="pokedex"><b>Página Pokédex: </a>
+	- Contém um Botão, onde é possível excluir todos os seus Pokémons da Pokédex;
+	- Contém cards de Pokémons, com a lista de Pokémons capturados;
+	- Em cada card tem um botão para removê-lo da Pokedex e um outro para acessar os detalhes do Pokémon;
+	- Contém 2 filtros, onde é possível filtrar pelo tipo do Pokémon e no outro ordená-los na ordem Crescente ou Decrescente de acordo com os nomes de cada um;
+	- No Header tem um botão para voltar para a Home e um input de busca pelo nome, para telas menores, como no celular, o input de busca se encontra mais abaixo da página, junto dos outros filtros e o Título "Pokémon" se torna o botão para retornar a Home;
+	- No Header tem um botão para mudar o tema de claro para escuro;
+	- Quando um Pokémon é excluído, o card é retirado da Pokédex e passa para a página da Home.
+<br>
+<br>
+- <a name="detalhes"><b>Página de Detalhes: </a>
+	- Mostra os detalhes do Pokémon selecionado, com informações descritas;	
+	- No Header tem 2 botões, um para voltar para Home e outro pra ir pra página da Pokedéx, para telas menores, como no celular, o Título "Pokémon" se torna o botão para retornar a Home e o botão para ir para a Pokédex se encontra mais abaixo, logo após o Header;
+	- No Header tem um botão para mudar o tema de claro para escuro.
+	- Contém um botão para capturar ou removê-lo da Pokedéx;
+	- **Atenção!!** Foi adicionado uma chance de captura para cada Pokémon, a chance foi baseada no 'capture rate' de cada Pokémon contido na API.
+<br>
+<br>
+- <a name="erro"><b>Página de Erro: </a>
+	- Contém um botão para retornar a Home;
+
+<br>
+<br>
+
+## O layout da página:
+
+![](https://github.com/RinoaYK/projeto-frontendreact/blob/main/LabEcommerceP.gif)
+https://github.com/RinoaYK/projeto-frontendreact/blob/main/LabEcommerce.mp4
 
 
 ### Instruções de entrega