This app is my submission to a Blue Squad coding challenge. In short, the primary requirements were:
- Interact with a third party API called Pokeapi and return data on certain pokemon
- Include a method for searching for a pokemon
- Have an interface that displays a pokemon's stats and picture on a "card"
- Allow users to click forward and backward to iterate to the next or previous pokemon
*A link to the full code challenge prompt can be found here
- The entire client was built in React
- I primarily used functional components rather than classes and used Hooks extensively
- I used flexbox for the design as suggested in the prompt
- I chose not to use any CSS libraries and built the overall design from scratch. Many libraries are too slick or clean for what I wanted, and as Pokemon is a playful and wholesome franchise I wanted the design to feel playful and sort of cartoony, with simplicity and bright colors in mind
- I eyedropped colors from the Pokemon logo, pokeball, and pokeapi website to create a consistent and recognizable color scheme
- The landing page is a simple call to action with a search bar allowing users to search for a Pokemon either by name or by number
- After a user has searched for a pokemon the search bar fades in on the navbar and remains there until the page is refreshed, allowing the user to either iterate through Pokemon using the arrow buttons, or make another search from the nav
- I included a message in the bottom left about the app being powered by Pokeapi and the logo is a link to the pokeapi site
- The app is not yet styled for mobile