Pokédex criada com Reactjs

Last update: Apr 24, 2022

🎯 Objetivo


🚀 Projeto desenvolvido para fins de estudo da biblioteca React JS com o consumo de uma API REST (PokeAPI).

🎥 Demo Gif

📸 Desktop



📱 Mobile

Você pode conferir o resultado final em: Pokedex

Funcionalidades


  • Listagem dos pokémons: Listar os pokémons com o uso da API REST.

  • Ampliar a listagem dos pokémons: Criar um button, para ampliar a quantia de pokémons mostrada ao usuário.

  • Buscar pokémons: Método para filtrar os pokémons a partir do seu nome ou ID.

  • Selecionar pokémon: Criar uma página na aplicação com mais detalhes sobre o pokémon escolhido.

  • NavTabs para navegar entre as seções: - [About] - [Status] - [Evolutions].

  • Criar seções do pokémon: Separar as informações do pokémon em três seções: [About] - [Status] - [Evolutions].

  • Seção About: Dados básicos sobre o pokémon, como habilidades, biografia e Egg Groups.

  • Seção Stats: Pontos de batalha do pokémon, como vida, ataque, defesa, velocidade, especial ataque e especial defesa.

  • Seção Evolution: Construir a árvore de evolução do pokémon.

  • Transformar em responsivo: Fazer a responsividade do site.

🎲 Rodando o projeto


Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js.

#### Clone este repositório

`$ git clone <https://github.com/Flaviane-Brum/Pokedex.git>`

#### Acesse a pasta do projeto no terminal/cmd

`$ cd pokedex`

#### Instale as dependências

`$ npm install`

#### Execute a aplicação em modo de desenvolvimento

`$ npm start`

🛠 Tecnologias utilizadas

  • ReactJs
  • Styled-components
  • React-Icons
  • Axios
  • React Router Dom

Made with ♥️ by Flaviane Brum.

GitHub

https://github.com/Flaviane-Brum/Pokedex
You might also like...

Imersão Alura - 3º Edição. Criando o Alurakut, baseado no antigo Orkut. Usando ReactJs, NextJs e StyledComponents, em um semana de muito aprendizado.

Imersão Alura - 3º Edição. Criando o Alurakut, baseado no antigo Orkut. Usando ReactJs, NextJs e StyledComponents, em um semana de muito aprendizado.

👷🏼‍♀️ 🚧 Cuidado - Obras em andamento 🚧 Olá pessoa, seja bem vindo ao Alurakut da Ana Esse tem a minha carinha, mas você pode ter o seu também! O A

Mar 7, 2022

Projeto desenvolvido na missão ReactJS no NLW #06

🧪 Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: React Firebase TypeScript 🚀 Como executar Clone o projeto e acesse a pasta

Aug 23, 2021

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

Aug 5, 2022

Reactjs Speed typing game

Reactjs Speed typing game

Reactjs Speed typing game

Mar 22, 2022

Sistema de páginas integradas feitas com Reactjs

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 22, 2022

List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!

List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!

React Interview Questions & Answers Click ⭐ if you like the project. Pull Request are highly appreciated. Follow me @SudheerJonna for technical update

Aug 6, 2022

A Magic Memory Game Built with ReactJS

A Magic Memory Game Built with ReactJS

Jun 30, 2022

Brainn challenge with ReactJs, Typescript, Redux and Cypress.

Brainn challenge with ReactJs, Typescript, Redux and Cypress.

Exercício de Front-end Introdução A proposta do exercício de front-end da Brainn é ser simples e divertido. Exercício O objetivo é construir uma aplic

Nov 9, 2021

📜 Spacetraveling é blog que foi desenvolvido como desafio no Ignite da trilha de ReactJs da Rocketseat.

📜 Spacetraveling é blog que foi desenvolvido como desafio no Ignite da trilha de ReactJs da Rocketseat.

SpaceTraveling - Next.js Aplicação em formato de blog utilizando Prismic CMS 📖 Sobre o projeto O projeto tem como objetivo o estudo e desenvolvimento

Dec 14, 2021
Uma aplicação criada com react-native para armazenar as skills dos usuários cadastrados.
Uma aplicação criada com react-native para armazenar as skills dos usuários cadastrados.

SkillsClass Aplicação focada no gerenciamento de skills dos usuários cadastrados. Uma aplicação desenvolvida no ignite da Rocketseat com alguns toques

Dec 25, 2021
Reactjs Pokedex application

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template. Available Scripts In the project directory, you can r

Jun 15, 2022
Pokedex using a external API and react hooks

Initial project config with Next Js, Typescript, ESlint, Prettier and Styled-Components

Nov 10, 2021
An SVG loader component for ReactJS

react-inlinesvg Load inline, local or remote SVGs in your React components. Highlights ?? Easy to use: Just set the src ?? Flexible: Personalize the o

Jul 28, 2022
Render visualizer for ReactJS
Render visualizer for ReactJS

React Render Visualizer A visual way to see what is (re)rendering and why. Features Shows when component is being mounted or updated by highlighting (

Aug 5, 2022
🎉 基于 reactjs 开发的可视化项目实战

?? 基于 reactjs 开发的可视化项目实战

Aug 2, 2022
Calculadora simples usando classes do ReactJS

React Calc This calculator was developed by me using ReactJS during my JavaScript studies.

Jun 23, 2021
Projeto desenvolvido durante a NLW #06, apresentado pela Rocketseat entre 20 a 27 de Junho de 2021. 💜 #NLW #ReactJS #Rocketseat

?? Projeto Let Me Ask é um projeto desenvolvido durante a Next Level Week #6, apresentado pela Rocketseat entre 20 a 27 de Junho de 2021. ?? Aula 1 Au

Jun 29, 2021
Projeto desenvolvido na missão ReactJS no NLW #06

?? Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: React Firebase TypeScript ?? Como executar Clone o projeto e acesse a pasta

Jul 26, 2022
Consuming GitHub API, showing user's profile and repositories, with ReactJS
Consuming GitHub API, showing user's profile and repositories, with ReactJS

GitHubProfiles Project made with ReactJS to practice API consuming using GitHub API, in order to show in a simple way user's profile and repositories.

Jun 16, 2022