Giter Club home page Giter Club logo

poki-api's Introduction

React Poke Card

Grabbing onto React hooks.

High Level Goals of this Sprint

  • Become familiar with functional react.
  • Apply hooks to control and manipulate your app.
  • Leverage an API to populate your app with data based on the url string.

Bare Minimum Requirements

Complete all the bare minimum requirements before moving on to the advanced content. This sprint gives you a substantial amount of creative freedom. We recommend that you read through all the requirements and hold a short planning session with your pair to discuss what your final product will be.

  • [] Renders a Pokemon Card based on the query parameters in the address bar. Do not use react-router for this assignment. See here for one way that you could accomplish this.

  • [] Makes requests to the PokeAPI to populate a Card of the Pokemon queried.

  • [] You can use fetch to make your api call or you may choose to incorporate a different library like axios

  • [] Use useEffect and useState properly to establish appropriate state management.

  • [] The pokemon card should contain the pokemon's name, sprite, and any other at a glance information that may be beneficial. Play with the PokeAPI interface to see what type of information is available for a pokemon.

  • [] When the card is clicked, render the 'back' of the card with a full glimpse of information about that pokemon.

  • [] Add your own style and flair to the page. Be creative.

A base repository built with Create-React-App has been provided for you.

Advanced Content

Our advanced content is intended to throw you in over your head, requiring you to solve problems with very little support or oversight, much like you would as a mid or senior level engineer.

Feel free to experiment with other React features while tackling these. You may choose to do any or all of these in any order:

  • [] Implement a side bar that shows all possible evolutions of the current pokemon(ie. 'charmander', 'charmeleon', 'charizard').

    • [] Each evolution should show a name and sprite as well as
    • [] Make a clickHandler redirecting the user to the associated page for that pokemon.
  • [] Add a navigation bar that allows the user to find other Pokemon.

    • [] Either implement a search feature that renders results on the current page.
    • [] Or display mini cards of randomly selected other pokemon.

Relevant Documentation:

poki-api's People

Contributors

mohsenali2211007khicnd avatar samraalmas6 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.