#Projeto React API

O Projeto React 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.

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.

Os conteúdos principais a serem estudados são:

- Integração de APIs

- React Router

- Design Systems

- Estado Global

É objetivo deste projeto criar um site com três páginas usando a Poke Api usando as seguintes ferramentas:

- React

- React Router

- Styled-components

- React Context

- Axios

- **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;

- Faça o fork desse repositório e realize o clone da sua cópia `seu-nome-de-usuario/projeto-intro-web`.

<details>

<summary>Quer uma dica?</summary>

<img src="https://firebasestorage.googleapis.com/v0/b/assets-conteudo.appspot.com/o/gerais%2Ffork.png?alt=media&token=7030e997-246a-41fe-a75f-2a2ced61e54d" alt="Como adicionar o projeto no repositório"/>

</details>

- Crie os arquivos do projeto dentro deste repo;

- Execute o fluxo de entrega do git. **Lembre-se de abrir os PRs para seu próprio repositório.**

- Para isso, você precisará fazer o projeto utilizando **branches**. Evite fazer as alterações direto na branch ```main```

<details>

<summary>Dúvidas sobre o Git & Github?</summary>

<p>Adiciomos um vídeo explicando o <strong>processo de entrega</strong> [do fork ao pull request] no Material Assincrono da <a href="https://classroom.google.com/w/NTM0NjA2NDg3MjIx/tc/NTM2NDg5NTQyODg4">A005 - Git e Github</a>. Esse vídeo também exemplifica situações que podem acontecer durante o fluxo de utilização do Git.</p>

</details>

- Faça o deploy do projeto. Pode ser ultilizado o surge, Github pages ou outra ferramenta que faça a disponibilização do seu site para acesso público;

* Instalar surge (só 1a vez): `npm install -g surge`

* Buildar app React: `npm run build`

* Deployar com surge: `surge ./build`

- Adicionar o link do deploy no readme do seu projeto/repositório:

- Entregue o **link do repo** no [Formulário de entrega](https://forms.gle/Q1mXTJFxwVUgUnrZA).