/make-a-pokedex

make a custom pokedex with Node/Express using the Pokeapi

Primary LanguageCSS

Intro to APIs: Make a Pokedex with the Pokeapi!

Learning Competencies

  • consume an API
  • implement an HTTP GET request
  • retrieve data from a JSON response
  • customize a front end display

Summary

Learn the basics of consuming an API and customizing it on the front end by customizing a Pokedex app using the Pokeapi API.

Installation

Clone or Download the repo

alt text

Install the dependencies & start the server

$ npm install

$ node server.js

View the Pokedex in your browser at http://localhost:8080.

Getting Started

  1. Check out the (Pokeapi documentation)[http://pokeapi.co/docsv2/#]
    • Read about what the API does and the shape of the data returned.
  2. Try making a GET request in curl or your browser
  3. Navigate to the JSON-Challenge branch and follow the instructions in the README
  4. Navigate to the Get-Challenge branch and follow the instructions in the README
  5. Finished? Try out the stretch challenges below! Decide how to adapt the API to fit your current needs.

Question time

What information can you get out of the API? How can you manipulate it? What are this APIs limitations?

Stretch Challenges

Now that you have a fully functional GET request working, you have the perfect project on which to experiment.

Implement any of the following:

  • Customize the front end. Can you catch em all? Animate the Pokemon avatars? Refactor the styling to a team Mystic theme?
  • Add Additional Routes and Views Add a splash page with a welcome message
  • Use an endpoint that requires authentication. Implement the Twitter API to post to your account every time you like a pokemon in your pokedex

Credits

Pokedex CSS: Bidji on Codepen