Your mission is to complete this Pokedex app, using Vue and your frontend knowledge. When you have reached the end of the test you should have something like this:
-
Implement the
getPokemon
andgetRandomPokemon
functions insrc/api/index.js
to consume the PokeAPI. You can use axios or fetch to communicate with the API, whichever you prefer. -
Finish the
PokemonCard
component by adding the official artwork sprite image and appropriate base stats to the table in the cells marked "INSERT STAT". You can refer to the PokeAPI Pokemon endpoint documentation for the data structure, for example you can access the HP base stat like sopokemon.stats[0].base_stat
. -
When the app is first mounted, we want to show a random Pokemon using the
getRandomPokemon
function and thePokemonCard
component. While fetching data, you should show a loading spinner using theLoader
component. -
Add the ability to search for a Pokemon by name or a National Pokedex number using the
SearchField
component and thegetPokemon
function. You should debounce the search to reduce the number of API requests while typing in the field by using thedebounce
function fromlodash-es
. Note: The API expects names to be lowercase, so you should transform the value before sending the request. -
Bonus: Implement the steps above using the new Composition API instead of the Options API.