https://github.com/riantavares/pokedex

A list of Pokemons and their features. Built using React JS with the Apollo client getting data from a GraphQL Pokémon API.
https://github.com/riantavares/pokedex

apollo-client front-end graphql javascript pokedex pokedex-application react reactjs

Last synced: 3 days ago
JSON representation

A list of Pokemons and their features. Built using React JS with the Apollo client getting data from a GraphQL Pokémon API.

• Host: GitHub
• URL: https://github.com/riantavares/pokedex
• Owner: RianTavares
• License: mit
• Created: 2020-06-23T19:08:04.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-05-25T01:30:26.000Z (over 1 year ago)
• Last Synced: 2024-04-28T06:40:41.436Z (7 months ago)
• Topics: apollo-client, front-end, graphql, javascript, pokedex, pokedex-application, react, reactjs
• Language: JavaScript
• Homepage: https://master.d1xba6pc0tplna.amplifyapp.com/
• Size: 9.85 MB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


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](https://nodejs.org/it/) 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

:warning: :point_down:

- if you enjoyed about this project add a star :star: 

- Don't forget to follow me on Instagram [@riantavares.dev](https://www.instagram.com/riantavares.dev/) :heart:

- And follow me also here on [github](https://github.com/RianTavares) :)

- Don't go away without contribute, PRs are welcome!

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
@RianTavaresOn
💻 🎨 📖

    
Rafael Ribeiro
💻 🎨

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!