Pokédex By Rian

What does it do

This project is a kind of study and a front-end challenge. Its main function is to capture information from a GraphQL API that returns all classic Pokémon and their information and, using React, organize the data on the screen providing the user with the experience to find all the information of the desired pokemon.

Features

• [✓] User friendly
• [✓] Mobile friendly
• [✓] List of all pokemons showing their names pokedex numbers and their main type color
• [✓] Organizable and readable code (using ESlint)
• [✓] Error component to handler 404 pages and Server error
• [✓] Sort of pagination using a button to request more data from API
• [✓] App up and running on Heroku (https://pokedexbyrian.herokuapp.com/)

Fast setup (CLI Version)

1. Download or Clone the project and extract it
2. Download Node.js and install it.
3. Run npm install into client folder
4. Start the project local via command line npm start
5. The project now is running on 3000 port.

Technology and resources

• React JS (some libs as react-router, react-router-dom, apollo-cache-inmemory, node-sass, etc)
• Apollo Client
• SASS
• Consumes from a GraphQL API (https://graphql-pokemon.now.sh/)

Needing improvement // To do

• Apollo client cache:
  • cache fragments
  • The Pokémon details page is not reading data from the updated cache
• API GraphQL:
  • It seems that the API is often crashing and returning 503
  • First option is to build an 503 error template
  • Second option is to search another API
• Write an issue if you find anything to improve or contribute making a pull request

⚠️ 👇

• if you enjoyed about this project add a star ⭐
• Don't forget to follow me on Instagram @riantavares.dev ❤️
• And follow me also here on github :)
• Don't go away without contribute, PRs are welcome!

Contributors ✨

Thanks goes to these wonderful people (emoji key):

@RianTavaresOn 💻 🎨 📖

Rafael Ribeiro 💻 🎨

This project follows the all-contributors specification. Contributions of any kind welcome!